[关闭]
@qinyun 2019-01-24T09:50:10.000000Z 字数 4188 阅读 1000

谷歌开源quicklink,加快页面加载速度

未分类


quicklink通过在空闲时预取viewport内的链接来加快后续页面的加载速度。

工作原理

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

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

安装

  1. npm install --save quicklink

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

用法

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

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

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

  1. <script>
  2. window.addEventListener('load', () =>{
  3.    quicklink();
  4. });
  5. </script>

ES模块导入:

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

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

API

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

待完成事项:

polyfill

quicklink:

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

一些示例

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

默认为2秒(通过requestIdleCallback),在这里我们将其设置为4秒:

  1. quicklink({
  2.   timeout: 4000
  3. });

设置包含预取URL的DOM元素

如果不设置,默认为document。

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

设置预取URL数组

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

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

设置预取的请求优先级

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

  1. quicklink({ priority: true });

指定origin自定义列表

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

  1. quicklink({
  2.   origins: [
  3.     // add mine
  4.     'my-website.com',
  5.     'api.my-website.com',
  6.     // add third-parties
  7.     'other-website.com',
  8.     'example.com',
  9.     // ...
  10.   ]
  11. });

允许所有origin

启用所有跨origin请求。

  1. quicklink({
  2.   origins: true,
  3.   // or
  4.   origins: []
  5. });

自定义Ignore模式

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

  1. // Same-origin restraint is enabled by default.
  2. //
  3. // This example will ignore all requests to:
  4. //  - all "/api/*" pathnames
  5. //  - all ".zip" extensions
  6. //  - all <a> tags with "noprefetch" attribute
  7. //
  8. quicklink({
  9.   ignores: [
  10.     /\/api\/?/,
  11.     uri => uri.includes('.zip'),
  12.     (uri, elem) => elem.hasAttribute('noprefetch')
  13.   ]
  14. });

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

  1. quicklink({
  2.     ignores: [
  3.         uri => uri.includes('#')
  4.         // or RegExp: /#(.+)/
  5.         // or element matching: (uri, elem) => !!elem.hash
  6.     ]
  7. });

浏览器支持

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

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

直接使用prefetcher

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

  1. <script type="module">
  2. import prefetch from '../src/prefetch.mjs';
  3. const urls = ['1.html', '2.html'];
  4. const promises = urls.map(url => prefetch(url));
  5. Promise.all(promises);
  6. </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

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注