谷歌开源 quicklink 使用教程

谷歌又开源了，谷歌一开源那必是精品啊。因为谷歌开源的各大框架，技术经常被大家广泛采用。

最近谷歌又来源了一项技术，名叫：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。

： » 谷歌开源 quicklink 使用教程