我如何知道我的 js/CSS 文件是否太大？ [关闭]答案

【问题标题】：How do I know if my js/CSS files is too huge? [closed]我如何知道我的 js/CSS 文件是否太大？ [关闭]
【发布时间】：2011-09-05 22:37:54
【问题描述】：

网站的 JavaScript 和 CSS 文件的最佳文件大小是多少？

【问题讨论】：

越小越好！如果还没有，请查看缩小。
如果想到“巨大”这个词，请开始切割。

标签： javascript css file browser

【解决方案1】：

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

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

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

不过，“最佳”最终是完全主观的。尝试设计最小的脚本/CSS 文件，向它们添加一堆 KB 的 cmets，然后在低端连接上加载您的页面，直到您认为它太慢。这会让你很好地了解你的上限应该是多少。

【讨论】：

【解决方案2】：

外部文件越小越好。

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

@Coding-Freak - 页面大小不是非常依赖于显示的内容吗？或者这是一个我还没有读过的总体尺寸限制？
引用一个人的来源被认为是礼貌的。有关此答案提供的原始建议，请参阅 useit.com/alertbox/sizelimits.html。
我在 Google 网站管理员论坛讨论的某处读到了这个值。它肯定取决于所提供的内容。但是如果这个值是错误的，那么你能纠正我吗？我很想知道合适的@Brett/
@Coding-Freak - 从未见过任何值，因此感谢您指出它们！谢谢。
我很抱歉我的 SO 同行，我忘了参考我获得信息源的文章。我不会再忘记了。

【解决方案5】：

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

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

异步加载适用于网页的各个方面；图像、CSS、JS 和 html。我所有的知识都是在 10 多年的网站工作中收集和学习的。

【讨论】：

我不知道使用 25kb 的 javascript 文件可以运行什么样的网站。现在，大多数 cms 中基于 css3 的网站和基本主题本身需要 100s Kbs 才能拥有一个像样的网站。
@blackops_programmer 这个答案已经超过 2 年了，当时这是报告的理想大小。这在今天不一定适用。但仍有一些方法可以让您的文件更小。现在很多讨论都是关于尽量减少对服务器的调用次数。无论哪种方式，都可以通过删除空格、组合文件或压缩来在一定程度上实现。即使是现在，我的未优化网站在 css 和 js 中运行在 300kb 左右。在页面加载时，脚本会通过最小化（删除 cmets 和空白）和压缩文件来运行它们。最终尺寸各不相同。
很公平，感谢您更新关于旧主题的帖子。我四处寻找网站管理员到现在为止的尺寸。现在，考虑到很多开发人员都在使用像 boostrap 这样的 css fw、像 jqeury、mootools 这样的 js lib。由于需要下载所有额外的 lib 并且很难下载，它只会让页面有点臃肿将其降至甚至小于 100kb。就像你说的，缩小 css、jss 和减少 http 请求似乎比未优化的文件做得更好。再次感谢您的回复。干杯! :)