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

标签 performance frontend

我最近一直致力于改进我们网站的前端性能,并采用了一些最佳实践。

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

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

为什么?

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

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

并发下载如下图所示:

Effect of using Google'CDN for concurrent downloads

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

所以我的问题是:

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

最佳答案

这是一个非常好的问题

您已经很好地解释了您的理由,这些都是进行此更改的充分理由。

但这两种方法仍有优势。

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

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

  • 所有库/插件都会立即下载,并应保留缓存以备日后需要时使用。

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

跨域的独立文件

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

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

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

关于performance - 最小化请求数量与浏览器缓存和多个域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12209692/

相关文章:

javascript - 数据未显示在新页面上

android - 不应该为 RecyclerView 项目 View 使用数据绑定(bind)吗?

c# - 具有大量几何图形的 WPF 绘图性能

Android:随着时间的推移将数据库加载到内存与查询

javascript - 当子组件被销毁时,摘要已经在进行中

javascript - React 从子级 -> 父级 -> 另一个子级传递数据

mysql - 一个或多个 MySQL 大表(性能)

xml - 存储大型、复杂的数据结构

javascript - 向下滚动后显示 div 然后向上滚动到顶部

javascript - 什么时候需要使用状态管理? ( Angular , react ,Vue)