包括大量 css 文件和 Javascript 文件 - 我如何优化答案

【问题标题】：Including loads of css files and Javascript file - how do I optimize包括大量 css 文件和 Javascript 文件 - 我如何优化
【发布时间】：2010-10-22 13:01:11
【问题描述】：

重复： Multiple javascript/css files: best practices?

大家好，我的应用程序快完成了，但问题是我注意到我包含了很多外部 javascript 文件和 css。我在这里使用了很多第三方免费插件，并且不想触摸代码，因为担心会搞砸。

但结果是我注意到我现在已经包含了 8 个外部 css 文件以及多达 20 个外部 Javascript 文件：O - 我不记得见过任何主要网站包含超过 2 或 3 个 css_ js 文件结合起来，所以我肯定在这里做错了什么。我该如何解决 - 我在某处读到一个大型 js 文件比 2 或 3 个文件加载速度更快，甚至是累积大小的一半。

任何帮助将不胜感激

【问题讨论】：

标签： javascript css optimization pageload

【解决方案1】：

YUI 压缩器http://developer.yahoo.com/yui/compressor/

还有一个不错的教程：http://beardscratchers.com/journal/compressing-css-and-javascript-with-yui-compressor

【讨论】：

【解决方案2】：

阅读：Best Practices for Speeding Up Your Web Site

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。看看这篇文章：How do I write a good answer.

【解决方案3】：

在过去的项目中，我使用SmartOptimizer 动态压缩 JS 和 CSS 文件。这是一个基于 PHP 的文件压缩器。

通过使用即时缩小器，您不必保留单独的源文件和缩小文件。当然，继续缩小文件需要一点处理能力。此外，加载单个缩小文件更好，具有以下优点：

更小的文件大小（肯定）
没有组件并行下载延迟，因为脚本/样式表更少。

【讨论】：

【解决方案4】：

如果您按照当前加载到页面的顺序将 CSS 文件合并到一个文件中（对于 JS 文件也是如此），那么它们的工作方式将与以前完全相同；当您开始更改顺序时，规则可能会意外地覆盖它们不习惯的顺序。

【讨论】：

【解决方案5】：

一个大文件比一堆小文件好，因为在这种情况下，Web 浏览器向 Web 服务器发出一个请求，而不是 8 个请求。更重要的不是总大小的细微差别，而是请求总数latency。

想象两种情况：您下载一个 8 kB 的文件和 8 个 1kB 的文件。

在第一个场景中，总时间是 80 毫秒（传输时间）+ 50 毫秒（延迟）= 130 毫秒
在第二种情况下，您有 8x10 毫秒（传输时间）+ 8x50 毫秒（！）的延迟 = 480 毫秒（！）

你看到了不同。这绝不是一个全面的例子，但你明白了。

因此，如果可能，请将文件合并在一起。压缩内容以减少要传输的数据量。并使用缓存来摆脱重复的请求。

【讨论】：

如果我将 javascript 文件合并在一起，会不会导致任何类型的冲突？还是只是将文件内容一个接一个地复制粘贴到一个大文件中？
是的，可能存在冲突。但总有一个权衡：如果你想优化它并让它更快，你必须投入一些时间来确保它正常工作。

【解决方案6】：

无论如何，您的大多数文件都应该在客户端缓存中结束，所以我不会太担心。只要确保你设置了正确的标题。当然，如果这是您网站的首页，那么是的，您可能应该进一步优化。

【讨论】：