javascript和css加载答案

【问题标题】：javascript and css loadingsjavascript和css加载
【发布时间】：2010-10-06 01:57:55
【问题描述】：

我想知道，如果我有，假设一个页面上包含 6 个 javascripts，并且同一页面上还包含 4-5 个 css，如果我创建一个文件或也许两个并将它们全部附加在一起而不是一堆？

【问题讨论】：

【解决方案1】：

是的。使用更少的文件将获得更好的性能。

这有几个原因，我相信其他人会加入，因为我不会全部列出。

除了文件大小之外，请求中还有开销，例如请求本身、标头、cookie（如果已发送）等。即使在许多缓存场景中，浏览器也会发送请求以查看文件是否已被修改。当然，正确的标头/服务器配置可以帮助解决这个问题。
默认情况下，浏览器具有有限数量的同时连接，它将一次打开到给定域。我相信 IE 有 2 个，而 firefox 有 4 个（我可能弄错了数字）。不管怎样，关键是，如果你有 10 张图片，5 个 js 文件和 2 个 css 文件，那么需要下载 17 个项目，同时只完成几个，其余的只是排队。

我知道这些是模糊和简单化的解释，但我希望它能让你走上正轨。

【讨论】：

如果您在使用 PHP 或其他脚本语言的服务器上，您通常可以通过脚本语言连接 Javascript 和 CSS（并同时缩小它）。出于上述原因，生产环境的好主意。
这实际上不适用于移动浏览器和大文件大小（由于附加它们）。 iPhone 上的 IIRC 有缓存限制。大于 25kB 的文件不会被缓存。因此，在移动设备上，有时最好使用更小但可能更多的文件。 Source（好吧，今天 iOS 4 的限制是 100kB，但这个论点仍然成立。）

【解决方案2】：

不再有任何理由在一方面为了组织而想要对 js 和 css 文件进行分区，另一方面为了效率而想要拥有很少的文件之间感到纠结。有一些工具可以让您同时实现这两者。

例如，您可以将 Blender 合并到您的构建过程中，以聚合（和压缩）CSS 和 JavaScript 资产。 Java 开发人员应该看看JAWR，这是最先进的。

【讨论】：

【解决方案3】：

正如其他人所说，是的，您可以包含的文件越少越好。

我强烈推荐Blender 用于缩小和合并多个 CSS/JS 文件。如果您像我一样，并且经常以 10 到 15 个样式表结束（重置、屏幕、打印、主页、关于、产品、搜索等...），那么这个工具会很有帮助。

【讨论】：

【解决方案4】：

即使浏览器执行多个请求，它也会尝试打开最少数量的 TCP 连接（请参阅 Keep-Alive HTTP 标头选项文档）。通过在服务器端设置压缩（DEFLATE 或 GZIP）模式也可以提高网页加载速度。

【讨论】：

+1。 Keep-alives 将减少在现代 Web 服务器上拥有单独文件的延迟。连接脚本/工作表仍然有好处，但不会很大。无论哪种情况，mod_deflate 都值得启用。

【解决方案5】：

我并不是很了解影响服务器负载的因素，但是我认为最好的办法是在拥有一大块和将脚本组织成有意义的单独文件之间找到平衡。我认为拥有五个左右不同的文件不会对性能产生太大影响。

一个更有影响力的因素是脚本的压缩，有各种在线实用程序可以消除空格并使用更有效的变量名，我认为这些将导致比将文件放在一起更显着的改进.

【讨论】：

【解决方案6】：

最好的解决方案是将所有代码添加到一个页面，以便浏览器可以在一个 GET 请求中获取它。如果您要链接到多个文件，则每次加载页面时浏览器都必须请求这些外部页面。

如果在浏览器中启用了管道化并且网站没有产生太多流量，这可能不会导致问题。

Google 已将其代码精简为一体。我什至无法想象有多少请求在如此大的流量下节省并减轻了服务器上的负载。

【讨论】：

【解决方案7】：

是的。这样你发出的 HTTP 请求就更少了。

【讨论】：

【解决方案8】：

每个包含都是用户浏览器必须发出的单独 HTTP 请求，并且 HTTP 请求会产生开销（在服务器和连接上）。组合多个 CSS 和 JavaScript 文件将使您和您的用户更轻松。

这也可以通过一种称为 CSS sprites 的技术来处理图像。

【讨论】：

【解决方案9】：

您的目标之一是减少 http 请求，所以是的。名为 yslow 的工具可以对您的应用程序进行评分，以帮助您了解可以采取哪些措施来获得更好的用户体验。

【讨论】：