加载时间从4.6s降到0.7s，谷歌开源quicklink

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

• 检测 viewport 中的链接，使用 Intersection Observer：

  https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

• 等待浏览器空闲，使用 requestIdleCallback：

  https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback

• 检查用户的连接速度（使用 navigator.connection.effectiveType）或者是否启用了 data-saver（使用 navigator.connection.saveData）；

• 预取链接（使用或 XHR），可以控制请求优先级（如果支持，可以切换到 fetch()）。

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

npm install --save quicklink

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

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

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

ES 模块导入：

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

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

• 在完成新路由导航后调用 quicklink()；

• 针对特定的 DOM 元素 / 组件调用 quicklink()；

• 使用自定义 URL 调用 quicklink({urls:[…]}) 进行预取。

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

• el：包含需要预取的链接的 DOM 元素；

• urls：要预取的 URL 数组（不是在 viewport 中检测到的文档或 DOM 元素的链接）；

• timeout：requestIdleCallback 超时时间，浏览器执行预取的时间（以毫秒为单位），默认为 2 秒；

• timeoutFn：用于指定超时的函数，默认为 requestIdleCallback，也可以替换为 networkIdleCallback（https://github.com/pastelsky/network-idle-callback）等自定义函数；

• priority：布尔值，指定预取优先级，默认为 false。如果设置为 true，将尝试使用 fetch() API（而不是 rel=prefetch）；

• origins：允许预取的 URL 主机名字符串数组。默认为与域名相同的 origin，防止跨 origin 请求；

• ignores：一个 RegExp 函数或数组，用于决定是否应该预取某个 URL。在 orign 匹配之后执行。

待完成事项：

• 检测资源的文件扩展名，并使用 rel=preload 进行高优先级预取；

• 使用 Priority Hints（https://github.com/WICG/priority-hints）进行重要性提示。

quicklink：

• 可以回退到 requestIdleCallback；

• 需要支持 IntersectionObserver，请参阅 CanIUse（https://caniuse.com/#feat=intersectionobserver）。我们建议使用 Polyfill.io 等服务来有条件地 polyfill 该功能：

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

quicklink({
  timeout: 4000
});

如果不设置，默认为 document。

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

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

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

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

quicklink({ priority: true });

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

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

启用所有跨 origin 请求。

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

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

// Same-origin restraint is enabled by default.
//
// This example will ignore all requests to:
//  - all "/api/*" pathnames
//  - all ".zip" extensions
//  - all  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（https://github.com/zloirock/core-js）提供了 Set() 和 Array.from() 填充，也可以考虑 es6-shim：

  https://github.com/paulmillr/es6-shim/blob/master/README.md

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

• Network Information API（https://wicg.github.io/netinfo/），用于检查用户的连接类型（通过 navigator.connection.effectiveType），仅适用于 Chrome 61+ 和 Opera 57+。

• 如果选择{priority: true}并且 Fetch API 不可用，则将使用 XHR。

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

这里是一个 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

2019 年 5 月 6-8 日，QCon 与您相约北京国际会议中心，深度解析业界前沿领域及技术趋势。点击 「 阅读原文 」或识别二维码了解 QCon 十周年精心策划，现在购票即享 8 折限时折扣，立减 1760 元，团购还有更多优惠！有任何问题欢迎联系票务小姐姐 Ring：电话 010-53935761，微信 qcon-0410