# 七、预加载 🔙 上一站 - 运行时
在之前的旅途中，我们提到了很多关于资源加载的优化，包括怎么加快连接的建立、怎么减少包体大小、怎么减少请求数等。但还有一种变相加快加载速度的技术 —— 预加载。
预加载相当于是快用户一步，在空闲的时候就把用户即将用到的资源加载完，等用户实际需要使用时，资源已经存在在本地，自然就跳过了整个加载的等待时间。
在「性能优化之旅」的最后一站，我会给你介绍一些预加载技术，包括使用览器提供的能力，或者巧用 JavaScript 中的相关 API。此外，除了预加载技术，预加载的一大核心问题还在于预加载策略，即如何判断资源是否需要预加载以及合适加载，以保证最高的效率。
# 1. 预加载技术 # 1.1. Resource Hints Resource Hints[1] 是一种预加载相关的标准，它告诉浏览器哪些源下的资源我们的 Web 应用需要获取，哪些资源在之后的操作或浏览时需要被使用，从而让浏览器能够进行一些预先连接或预先加载操作。Resource Hints 标准包括 DNS Prefetch、Preconnect、Prefetch 与 Prerender。此外，还有一个与 Resource Hints 类似的 Preload 我们也会在这里介绍一下。
在发起请求部分我们已经介绍了如何使用 DNS Prefetch 来预解析 DNS、如何使用 Preconnect 来预先建立连接。所以下面会其他三块：Prefetch、Prerender、Preload。
# 1.1.1. Prefetch 你可以把 Prefetch 理解为资源预获取。一般来说，可以用 Prefetch 来指定在紧接着之后的操作或浏览中需要使用到的资源，让浏览器提前获取。由于仅仅是提前获取资源，因此浏览器不会对资源进行预处理，并且像 CSS 样式表、JavaScript 脚本这样的资源是不会自动执行并应用于当前文档的。其中 as 属性用于指定资源的类型，与 Preload 规范一致，基本涵盖了所有资源类型[2]。
1# 1.1.2. Prerender Prerender 比 Prefetch 更进一步，可以粗略地理解不仅会预获取，还会预执行。
The prerender link relation type is used to identify a resource that might be required by the next navigation, and that the user agent SHOULD fetch and execute.
如果你指定 Prerender 一个页面，那么它依赖的其他资源，像
123456789101112131415161718192021222324252627282930313233343536373839# 3. 预加载的策略 预加载一般都会面临一些矛盾：
预加载资源过多，可能导致流量消耗过大，占用正常请求的通道； 预加载资源过少，可能导致覆盖率太低，对于大部分资源用户无法享受到预加载效果。 设计一个高效的预加载策略是一个很复杂的问题 ，这里只简单介绍一些工具。
# 3.1. quicklink quicklink 是 GoogleChromeLabs 推出的轻量级库，使用 Resource Hints 进行预加载，对于不支持的浏览器会回退到 XHR 模式。它的策略其实非常直接，核心就是当链接进入到视口后，会对其进行预加载。
当然我们还可以加一些其他策略，例如设定一个 200ms 的停留阈值。总体而言，它的策略还是比较简单的，更像是为前端预加载提供一个思路。如果感兴趣，可以从这篇文章中了解 quicklink 的实现细节[6]。
# 3.2. Guess.js Guess.js 则是一个更为完备的工具包。它会结合前端访问与打点的数据进行统计，甚至应用一些机器学习的模型，来提供一个更精细化、更准确的预加载策略。同时，在预加载之外，它还可以帮助实现最优的打包方式、加载路径等。核心就是通过大量的实际用户数据，来帮助前端性能优化做决策与预测。
你可以查看 Guess.js Repo 来进一步了解它，或者阅读这篇介绍文章[7]。
关于预加载的话题就到这了，我们的「前端性能优化之旅」也接近尾声了。最后一站，让我们再回来从整体维度聊聊前端性能优化吧。
下一站 - 聊聊前端性能优化 🔜
# 参考资料 Resource Hints (W3C) Preload (W3C) 使用Resource Hint提升页面加载性能与体验 in webpack Fast Playback with Video Preload quicklink：实现原理与给前端的启发 Introducing Guess.js - a toolkit for enabling data-driven user-experiences on the Web Prefetching, preloading, prebrowsing Preload: What Is It Good For? Faster web navigation with predictive prefetching