使用预加载资源来实现智能预读功能-建站知识-邢台乐客互联

研究表明，更快的加载时间可带来更高的转换率和更好的用户体验。如果你了解用户如何浏览你的网站以及他们接下来可能访问哪些页面，则可以通过提前下载这些页面的资源来缩短将来导航的加载时间。

本指南说明了如何通过<link rel=prefetch>使用资源提示来实现该目标，该资源提示使你能够以简单有效的方式实现预取。

使用`rel=prefetch`改善导航

添加<link rel=prefetch>到网页可以使浏览器下载用户将来可能需要的整个页面或某些资源（例如脚本或 CSS 文件）。这可以改善 “首次内容丰富的绘画” 和 “互动时间” 等指标，并且通常可以使后续导航看起来立即可以加载。

<link rel="prefetch" href="/articles/" as="document">

使用 rel=prefetch 改善导航

该prefetch提示消耗对于不立即需要的资源额外字节，所以要精心应用这一技术的需求；仅在确信用户将需要资源时才预取资源。当用户的连接速度较慢时，请考虑不进行预取。你可以使用 Network Information API 进行检测。

有多种方法可以确定要预取的链接。最简单的方法是预取当前页面上的第一个链接或前几个链接。也有一些库使用更复杂的方法，这将在本文后面解释。

使用案例

预取后续页面

当可以预测后续页面时，请预取 HTML 文档，以便在单击链接时立即加载该页面。

例如，在产品列表页面中，你可以预取列表中最受欢迎的产品页面。在某些情况下，下一次导航甚至更容易预期 - 在购物车页面上，用户访问结帐页面的可能性通常很高，这使其成为预取的理想选择。

eBay 对搜索页面上的前五个结果实施了预取，以加快未来页面的加载速度，并看到对转换率的积极影响。

预取静态资产

当可以预测用户可能访问的后续部分时，预取静态资产（例如脚本或样式表）。当这些资产在许多页面上共享时，这特别有用。

预取静态资产，如脚本或样式表，可以预测用户可能访问的后续部分。当这些资产在多个页面之间共享时，这尤其有用。

预取 Javascript 资源

通过代码拆分 JavaScript 捆绑包，你可以最初仅加载应用程序的一部分，然后延迟加载其余部分。如果你正在使用此技术，则可以将预取应用于并非立即需要但可能很快就会请求的路由或组件。

例如，如果你的页面包含一个按钮，该按钮会打开一个对话框，其中包含一个表情符号选择器，则可以将其分为三个 JavaScript 块：主页，对话框和选择器。最初可以加载 Home 和对话框，而选择器可以按需加载。诸如 webpack 之类的工具可让你指示浏览器预取这些按需块。

如何实现`rel=prefetch`

最简单的实现方法是设置 <link>标签中的prefetch属性：

<head>
	...
	<link rel="prefetch" href="/articles/" as="document">
	...
</head>

该属性不是强制性的，但建议使用。它可以帮助浏览器设置正确的消息头，并确定资源是否已在缓存中。此属性示例值包括：document，script，style，font，image等。

你还可以通过 LinkHTTP 标头启动预取：

Link: </css/style.css>; rel=prefetch

在 HTTP 标头中指定预取提示的好处是，浏览器无需解析文档即可找到资源提示，这在某些情况下可以提供一些小的改进。

除 Safari 外，所有现代浏览器均支持prefetch功能。你可以使用 XHR 请求或 Fetch API 为 Safari 实现后备技术。

预取带有 webpack 魔术注释的 JavaScript 模块

webpack 使你可以预取脚本，以合理地确定某些用户不久将访问或使用的路由或功能。

下面的代码片段从 lodash 库中延迟加载了排序功能，以对将由表单提交的一组数字进行排序：

form.addEventListener("submit", e => {
	e.preventDefault()
	import('lodash.sortby')
		.then(module => module.default)
		.then(sortInput())
		.catch(err => { alert(err) });
});

无需等待 “提交” 事件以加载此功能，而是可以预取此资源，以增加用户提交表单时将其在缓存中可用的机会。webpack 允许在import()中使用魔术注释：

form.addEventListener("submit", e => {
	e.preventDefault()
	import('lodash.sortby')
		.then(module => module.default)
		.then(sortInput())
		.catch(err => { alert(err) });
});

这告诉 webpack 将<link rel=”prefetch”>标记注入 HTML 文档中：

<link rel="prefetch" as=”script” href=”1.bundle.js”>

使用quicklink和Guess.js进行智能预取

你还可以使用prefetch在后台使用的库来实现更智能的预取：

quicklink 使用交集观察者API来检测链接何时进入 viewport，并在空闲时间预取链接的资源。
Guess.js 使用分析报告来构建一个预测模型，用于智能地预取用户可能需要的内容。

结论

使用prefetch可以大大缩短以后导航的加载时间，甚至可以使页面看起来立即加载。prefetch在现代浏览器中得到了广泛的支持，这使其成为一种吸引许多用户的导航体验的诱人技术。此技术需要加载可能不使用的额外字节，因此在使用时要谨记；仅在必要时才这样做，理想情况下，仅在快速网络上才这样做。