我怎么知道我的js / CSS文件是否太大了？

Question

网站的JavaScript和CSS文件的最佳文件大小是什么？

Answer 1

零字节。这听起来很滑稽，但没有“最佳”文件大小。它越大，页面渲染的时间就越长。访问者与您的网站的连接速度有多快？例如，如果它是一个面向视频的网站，它可能相对较快，因为拥有64 kbps调制解调器的人不会尝试流式传输任何大型网站。如果它是一个向津巴布韦的卫星用户显示信息的简单文本站点，它可能会很慢。

让我们假设平均速度为1.5 Mbps。实际上，将其减半至750 Kbps。这大约是94 KBps。因此，如果您的CSS文件为50 KB且您的javascript文件为50 KB，则需要一秒多一点的时间才能为访问者下载它们。您的网站是否具有高度互动性，用户希望能够快速地从一个网站点击到另一个网站？如果是这样，那么一旦第二次延迟可能会非常恼人。如果没有，那么它可能是完全合理的。

如果您发现文件太大，可能需要考虑查看一些“缩小”实用程序;这些实用程序将使用您的代码，用较短的名称（“a”）替换变量名称（“my_descriptive_variable”），删除空格和注释等。有时这些实用程序可以将您的代码减少到之前的10％。 / p>

但最终，“最佳”是完全主观的。尝试设计最小的脚本/ CSS文件，向它们添加一堆KB注释，并在低端连接上加载页面，直到您认为它太慢。这样可以很好地了解你的上限应该是什么。

Answer 2

外部文件越小越好。

但也许比拥有更小的大小更重要的是fewer separate resources，这意味着更少的HTTP请求。例如，单个1MB文件的加载速度通常比十个100KB文件快。当您将多个CSS（或JavaScript，图像等）文件合并为一个文件时，您会感觉更好。

Answer 3

但是，你真正想要利用的一件事就是缓存。因此，将所有共享实用程序和样式放在一个文件中，将其缩小，并将其包含在每个页面中。大多数现代浏览器只下载一次，并快速下载（缩小）。然后，还要缩小特定于页面的页面，然后就完成了。

Answer 4

用户正在查看的页面总大小应约为100kb。这使用户视图和搜索引擎更容易抓取您的网站。

“页面大小”的概念被定义为构成页面的所有元素的文件大小的总和，包括定义HTML文件以及所有嵌入对象（例如，具有GIF和JPG图片的图像文件） ）。只要HTML文件很小并且编码以减少浏览器的渲染时间，就可以摆脱页面大小较大的页面设计。

Answer 5

通常，您的Javascript文件应小于25kb，CSS文件应小于10kb，越小越好，这些数字将根据资源和项目而有所不同。有时这是不可能的，但您可以最小化空格（空格，返回和删除注释）。理想情况下，每一行应该是CSS中的一个样式定义，并且应该美化您的Javascript（删除冗余代码以及将反复使用的代码放入函数中），并尽可能将其最小化为一行。

通常，您的CSS应该在页面的头部加载，JS应该在关闭的body标签之前加载。这样，在等待加载CSS或JS时，页面仍然可以加载。大多数浏览器和服务器一次只能从一台服务器加载大约4个资源。如果可能，您可以将资源分配到多个服务器/子域以创建异步加载。

异步加载适用于网页的所有方面;图像，CSS，JS和HTML。我所有的知识都是通过在网站上工作超过10年来收集和学习的。