最小化请求数量与浏览器缓存和多个域名

Question

我最近一直在努力改善我们网站的前端性能，并且已经采用了许多最佳实践。

但是我有一个最近的例子，其中一些做法彼此略有不同

• 最小化HTTP请求
• 为了“欺骗”浏览器使更多并发请求具有来自不同域的一些资产
• 利用浏览器缓存

为什么？

我们曾经将几乎所有的Javascript捆绑到一个文件中，以最大限度地减少HTTP请求。这包括JQuery和JQuery UI。

我认为这很愚蠢，因为许多用户可能已经在浏览器中缓存了JQuery，所以我决定将它从all.js中删除，而是从Google的CDN中提供。这将节省用户再次下载代码，并且因为它位于不同的域上，所以可以与我们自己的域中的其他资源并行下载。

并发下载如下图所示：

这当然增加了对没有JQuery的人的请求数量已经缓存，但这并不是很好。

所以我的问题是：

变化是明智的吗？利用缓存和允许并发请求的好处是否超过了请求数量的轻微增加？

Answer 1

这是非常好的问题。

你已经很好地解释了你的推理，他们都是做出改变的充分理由。

但这两种方法仍然有好处。

将所有内容合并到一个文件中

• 减少HTTP请求的数量，减少往返延迟对用户连接的负面影响。

• 所有库/插件都会立即下载，并且应该在以后需要时保持缓存状态。

• 减少对其他服务的依赖（尽管Google会非常可靠）。

跨域分开的文件

• 增加下载的并行化，减少带宽整形对用户连接的负面影响。 （请注意，大多数浏览器don't会将并发的每个域请求限制为2。）

• 增加粒度 - 可以根据需要按需下载单独的部分，即如果第一页点击时不需要特定的插件，则不会下载。

就个人而言，我通常会倾向于前者（通过将HTTP请求组合成一个大文件来减少HTTP请求）。我觉得我的大多数观众都会使用相当高带宽的连接，我可以减少延迟。请记住使用谷歌和雅虎的页面速度工具来找到加快速度的其他方法。