加载时间从4.6s降到0.7s，谷歌开源quicklink_大前端_Geek_q4vipd

QCon 演讲火热征集中，快来分享技术实践与洞见！了解详情 



 写点什么

近日，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 内的链接。

<!-- Include quicklink from dist --><script src="dist/quicklink.umd.js"></script><!-- Initialize (you can do this whenever you want) --><script>quicklink();</script>

复制代码

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

<script>window.addEventListener('load', () =>{   quicklink();});</script>

复制代码

ES 模块导入：

import quicklink from "quicklink/dist/quicklink.mjs";quicklink();

复制代码

上面的选项最适合多页面网站。单页应用程序也有几个可用的选项：

在完成新路由导航后调用 quicklink()；
针对特定的 DOM 元素/组件调用 quicklink()；
使用自定义 URL 调用 quicklink({urls:[…]})进行预取。

API

quicklink 可以接受带有以下参数的可选选项对象：

el：包含需要预取的链接的 DOM 元素；
urls：要预取的 URL 数组（不是在 viewport 中检测到的文档或 DOM 元素的链接）；
timeout：requestIdleCallback 超时时间，浏览器执行预取的时间（以毫秒为单位），默认为 2 秒；
timeoutFn：用于指定超时的函数，默认为 requestIdleCallback，也可以替换为networkIdleCallback等自定义函数；
priority：布尔值，指定预取优先级，默认为 false。如果设置为 true，将尝试使用 fetch() API（而不是 rel=prefetch）；
origins：允许预取的 URL 主机名字符串数组。默认为与域名相同的 origin，防止跨 origin 请求；
ignores：一个 RegExp 函数或数组，用于决定是否应该预取某个 URL。在 orign 匹配之后执行。

待完成事项：

检测资源的文件扩展名，并使用 rel=preload 进行高优先级预取；
使用Priority Hints进行重要性提示。

polyfill

quicklink：

可以回退到 requestIdleCallback；
需要支持 IntersectionObserver，请参阅CanIUse。我们建议使用 Polyfill.io 等服务来有条件地 polyfill 该功能：

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

复制代码

一些示例

设置自定义的资源预取超时时间

默认为 2 秒（通过 requestIdleCallback），在这里我们将其设置为 4 秒：

quicklink({  timeout: 4000});

复制代码

设置包含预取 URL 的 DOM 元素

如果不设置，默认为 document。

const elem = document.getElementById('carousel');quicklink({  el: elem});

复制代码

设置预取 URL 数组

如果你想要直接提供预取 URL 的列表，而不是去检测 viewport，可以使用 URL 数组。

quicklink({   urls: ['2.html','3.html', '4.js']});

复制代码

设置预取的请求优先级

默认为低优先级（rel=prefetch 或 XHR）。对于高优先级（priority: true），尝试使用 fetch()，或者回退到 XHR。

quicklink({ priority: true });

复制代码

指定 origin 自定义列表

提供可预取的主机名列表。默认情况下只允许来自相同 origin 的 URL。

quicklink({  origins: [    // add mine    'my-website.com',    'api.my-website.com',    // add third-parties    'other-website.com',    'example.com',    // ...  ]});

复制代码

允许所有 origin

启用所有跨 origin 请求。

quicklink({  origins: true,  // or  origins: []});

复制代码

自定义 Ignore 模式

这些过滤器在 origin 匹配之后运行，对于避免下载大文件或动态响应 DOM 属性来说非常有用。

// Same-origin restraint is enabled by default.//// This example will ignore all requests to://  - all "/api/*" pathnames//  - all ".zip" extensions//  - all <a> tags with "noprefetch" attribute//quicklink({  ignores: [    /\/api\/?/,    uri => uri.includes('.zip'),    (uri, elem) => elem.hasAttribute('noprefetch')  ]});

复制代码

你可能希望忽略包含 URL 片段的 URL（例如 index.html #top）。如果你在页面中使用了锚点或为单页面应用程序设置了 URL 片段，希望避免触发此类 URL 的预取，那么这项功能非常有用。

quicklink({    ignores: [        uri => uri.includes('#')        // or RegExp: /#(.+)/        // or element matching: (uri, elem) => !!elem.hash    ]});

复制代码

浏览器支持

quicklink 提供的预取可以被视为一种渐进式增强。跨浏览器支持情况如下：

没有 polyfill：Chrome、Firefox、Edge、Opera、Android Browser, Samsung Internet。
使用 Intersection Observer polyfill：Safari、IE11。
上面的再加上 Set()和 Array.from polyfill：IE9 和 IE10。Core.js提供了 Set()和 Array.from()填充，也可以考虑es6-shim。

提供了某些功能的分层支持：

Network Information API，用于检查用户的连接类型（通过 navigator.connection.effectiveType），仅适用于 Chrome 61+和 Opera 57+。
如果选择{priority: true}并且 Fetch API 不可用，则将使用 XHR。

直接使用 prefetcher

quicklink 包含一个 prefetcher，可以单独导入到其他项目中使用。在将 quicklink 作为依赖项安装好以后，可以按如下方式使用它：

<script type="module">import prefetch from '../src/prefetch.mjs';
const urls = ['1.html', '2.html'];const promises = urls.map(url => prefetch(url));Promise.all(promises);</script>

复制代码