本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
谷歌又开源了，谷歌一开源那必是精品啊。因为谷歌开源的各大框架，技术经常被大家广泛采用。
最近谷歌又来源了一项技术，名叫：quicklink。据说使用它，可以将网页的加载速度从 4.6s 降到 0.7s！
假的吧，速度真有这么快？那么用起来到底如何，我们一起来实验实验！
安装
使用 quicklink 之前，我们可以先通过 npm 来安装它。
npm install --save quicklink
quicklink 的体积非常的小，压缩后不到 1KB。
网页中的用法
<!-- 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 适合在多页面的网站中使用，也可以在单页面的应用程序中使用。如果在但页面中使用，只需改变 quicklink 的调用位置即可。
- 在完成新路由导航后调用 quicklink()；
- 针对特定的 DOM 元素 / 组件调用 quicklink()；
- 使用自定义 URL 调用 quicklink({urls:[…]}) 进行预取。
上面 3 种操作，经常在单页面中进行使用。
quicklink 的常用 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 匹配之后执行。
quicklink 的实现原理
quicklink 通过以下措施加快后续页面的加载速度：
- 检测 viewport 中的链接，使用Intersection Observer。
- 等待浏览器空闲，使用requestIdleCallback。
- 检查用户的连接速度（使用 navigator.connection.effectiveType）或者是否启用了 data-saver（使用 navigator.connection.saveData）；
- 预取链接（使用或 XHR），可以控制请求优先级（如果支持，可以切换到 fetch()）。
常用的使用示例
设置自定义的资源预取超时时间。quicklink 默认的超时时间为 2 秒，我们将其改为 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
'codedq.net',
'xttblog.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。
更多功能和教程，请参考官方文档：https://github.com/GoogleChromeLabs/quicklink。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » 谷歌开源 quicklink 使用教程