2

重复： 多个 javascript/css 文件：最佳实践？

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

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

任何帮助将不胜感激

4

6 回答 6

2

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

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

  1. 在第一个场景中，总时间是 80 毫秒（传输时间）+ 50 毫秒（延迟）= 130 毫秒

  2. 在第二种情况下，您有 8x10 毫秒（传输时间）+ 8x50 毫秒（！）的延迟 = 480 毫秒（！）

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

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

于 2009-04-29T10:18:56.240 回答
1

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

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

于 2009-04-29T09:24:20.443 回答
1

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

于 2009-04-29T10:06:38.457 回答
1

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

于 2009-04-29T10:19:15.447 回答
0

阅读本文：加快网站速度的最佳实践

于 2009-04-29T09:27:20.750 回答
0

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

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

  1. 较小的文件大小（肯定）
  2. 没有组件并行下载延迟，因为脚本/样式表更少。
于 2009-04-29T09:34:39.717 回答