页面加载多久算超时_加载时间从 4.6s 降到 0.7s，谷歌开源 quicklink

出处：前端之巅

近日，Google 团队在 GitHub 上开源了一个项目 quicklink，quicklink 能在空闲时预取 viewport 内的链接来加快后续页面的加载速度。具体的技术原理和实现过程请看下文。

工作原理

quicklink 通过以下措施加快后续页面的加载速度：

• 检测 viewport 中的链接，使用Intersection Observer。
• 等待浏览器空闲，使用requestIdleCallback。
• 检查用户的连接速度(使用 navigator.connection.effectiveType)或者是否启用了 data-saver(使用 navigator.connection.saveData)；
• 预取链接(使用或 XHR)，可以控制请求优先级(如果支持，可以切换到 fetch())。

为什么要推出 quicklink？

quicklink 旨在成为根据用户 viewport 中的链接预取内容的简易解决方案，而且要保持很小的体积(压缩后小于 1KB)。

安装

npm install --save quicklink

也可以从unpkg.com/quicklink下载 quicklink。

用法

在初始化后，quicklink 将自动在空闲时预取 viewport 内的链接。

例如，你可以在 load 事件触发后进行初始化：

ES 模块导入：