谷歌开源 quicklink 使用教程

业余杂谈 herman 861浏览
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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

最近谷歌又来源了一项技术,名叫:quicklink。据说使用它,可以将网页的加载速度从 4.6s 降到 0.7s!

假的吧,速度真有这么快?那么用起来到底如何,我们一起来实验实验!

谷歌 quicklink

安装

使用 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 使用教程

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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 谷歌开源 quicklink 使用教程