it-swarm.cn

我应该将js / css文件合并到一个文件中吗?

YSlow 和Google的 Page Speed 附加组件建议将脚本(和样式)文件合并为一个文件,以减少HTTP请求的数量,我当然可以看到当脚本文件在整个站点上保持一致时,但对于整个站点具有不同要求的Web应用程序而言,这一点。

我看到它的方式有几个选择:

  1. 合并整个站点使用的所有文件,每个页面都获得相同的组合文件 - 缺点是未使用的内容混乱了脚本(以及更重的第一次加载(当任何组件脚本更改时也重新加载))

  2. 在每页的基础上组合文件 - 缺点是每个页面具有不同的要求获得不同的组合文件(每个页面类型的较重的首次加载)

  3. 忽略严格的“仅一个文件”解释建议,并在适当的情况下将页面加载到多个文件中,缓存希望在一般情况下否定HTTP请求的数量 - 缺点是每个页面上的HTTP请求数量

思考?

11
Cebjyre

方案2是最差的;这意味着每个具有所需JS脚本组合的页面都会产生HTTP请求。它会使性能很多更糟。

选项1是最好的。最终,大多数用户将访问您网站的大多数页面“类型”,因此将所有内容组合到单个文件中仍然是有利的,可能除少数,很少访问的页面中需要的大型JS文件之外。

第一页命中可能比使用不同文件慢,但它仍然值得做,因为每个其他页面命中将使用缓存的全局JS。

一个提示虽然;如果你还没有自动合并它们!

11
Thomas Bonini

我通常将“全局Javascript” - jQuery和常见插件 - 组合到一个文件中,然后在需要时将额外的插件作为单独的文件提供。

例如,我运行许多页面的一个站点上有数据表,所以我有global.js与jQuery,DataTables和SuperFish(对于我的菜单)。网站上有两个页面使用“灯箱”,所以我有两个单独的脚本用于这两个页面。

对于CSS,我只为整个站点提供单个文件,并尽可能使CSS尽可能通用 - 大多数页面只有一些独特的CSS元素。

4
DisgruntledGoat

我不建议将所有这些结合起来。如果您使用的是公共库,则可以利用CDN来提供javascripts。然后,您可以利用浏览器缓存(假设其他站点使用相同的CDN)和分布式传递。 微软谷歌 每个都有解决方案(我没有诚实地使用过,但我肯定会开始)并且可能还有其他解决方案。在相关的说明中,SO有这样一个问题:

浏览器何时自动清除JavaScript缓存?

第一个答案是纯金。

1
Larry Smithmier

虽然绝对建议尽可能少地使用文件,但您可能会发现在页面加载时需要的功能与可以通过异步加载延迟的功能之间存在分离。

如果可以将足够的JS推送到第二类,则可以提高页面的初始加载速度,为用户创建更好的体验。

1
JasonBirch