出处：前端之巅
近日，Google 团队在 GitHub 上开源了一个项目 quicklink，quicklink 能在空闲时预取 viewport 内的链接来加快后续页面的加载速率。详细的技能事理和实现过程请看下文。事情事理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:[…]}) 进行预取。APIquicklink 可以接管带有以下参数的可选选项工具：
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进行主要性提示。polyfillquicklink：
可以回退到 requestIdleCallback；须要支持 IntersectionObserver，请参阅CanIUse。我们建议利用 Polyfill.io 等做事来有条件地 polyfill 该功能：<script src=\"大众https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver\公众></script>一些示例
1、设置自定义的资源预取超时时间
默认为 2 秒（通过 requestIdleCallback），在这里我们将其设置为 4 秒：
quicklink({ timeout: 4000});
2、设置包含预取 URL 的 DOM 元素
如果不设置，默认为 document。
const elem = document.getElementById('carousel');quicklink({ el: elem});
3、设置预取 URL 数组
如果你想要直接供应预取 URL 的列表，而不是去检测 viewport，可以利用 URL 数组。
quicklink({ urls: ['2.html','3.html', '4.js']});
4、设置预取的要求优先级
默认为低优先级（rel=prefetch 或 XHR）。对付高优先级（priority: true），考试测验利用 fetch()，或者回退到 XHR。
quicklink({ priority: true });
5、指定 origin 自定义列表
供应可预取的主机名列表。默认情形下只许可来自相同 origin 的 URL。
quicklink({ origins: [ // add mine 'my-website.com', 'api.my-website.com', // add third-parties 'other-website.com', 'example.com', // ... ]});
6、许可所有 origin
启用所有跨 origin 要求。
quicklink({ origins: true, // or origins: []});
7、自定义 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。直策应用 prefetcherquicklink 包含一个 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>演示
这里是一个 WebPageTest演示。
https://www.webpagetest.org/video/view.php?id=181212_4c294265117680f2636676721cc886613fe2eede&data=1
通过利用 quicklink，将页面加载韶光减少了 4 秒。这里是进行预取前后的比较视频。
https://youtu.be/rQ75YEbJicw
出于演示的目的，我们在 Firebase 上支配了一个谷歌博客，然后我们又支配了另一个版本，在主页上添加了 quicklink，并测试从主页导航到文章的速率，结果预取版本的加载速率更快。
请把稳：这并不是一个针对 viewport 内链接预取优缺陷的详尽基准测试，我们只是演示了这个方法可以为我们带来的潜在改进。
英文原文：https://github.com/GoogleChromeLabs/quicklink
