【问题标题】:Minimising number of requests vs Browser Caching & Multiple domains最小化请求数量与浏览器缓存和多个域
【发布时间】:2012-08-25 22:30:37
【问题描述】:

我最近一直致力于改善我们网站的前端性能,并采用了许多最佳做法。

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

  • 尽量减少 HTTP 请求
  • 为了“诱骗”浏览器发出更多并发请求,从不同的域提供一些资产
  • 利用浏览器缓存

为什么?

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

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

并发下载如下图所示:

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

所以我的问题是这样的:

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

【问题讨论】:

    标签: performance frontend


    【解决方案1】:

    这是一个非常好的问题

    你已经很好地解释了你的推理,它们都是做出这个改变的好理由。

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

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

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

    • 一次下载所有库/插件,并应保持缓存以备日后需要。

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

    跨域的独立文件

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

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

    就个人而言,我通常会稍微倾向于前者(通过将 HTTP 请求合并到一个大文件中来减少它们)。我觉得我的大多数观众都将使用相当高的带宽连接,我可以减少延迟。记得使用 Google 和 Yahoo 的页面加速工具来寻找其他加快速度的方法。

    【讨论】:

    • 谢谢,我确实在使用这些工具,而且我们做得很好,还有一些事情要做。由于 JQuery 相对普遍,您对 JQuery 很可能被缓存有何看法。如果您采用将所有内容保存在一个文件中的方法,已经缓存的用户将有效地下载两次。
    • 我通常还是会将它们合并到一个文件中以减少 HTTP 请求。然而,现在 jQuery 已经足够大了(>30KB gzipped),在较慢的连接上,传输时间开始比 HTTP 请求的开销更重要,在这种情况下,如果用户缓存了 Google 的实例,那将是一个胜利。您还可以相信 Google 会正确配置缓存控件和 gzip。
    猜你喜欢
    • 2019-08-18
    • 1970-01-01
    • 1970-01-01
    • 2013-01-09
    • 1970-01-01
    • 1970-01-01
    • 2022-08-19
    • 2018-04-20
    • 1970-01-01
    相关资源
    最近更新 更多