《HarmonyOS:领航者说》技术公开课来啦,大咖分享、实战解码,不容错过 了解详情
写点什么

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

  • 2019-01-25
  • 本文字数:2649 字

    阅读完需:约 9 分钟

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

近日,Google 团队在 GitHub 上开源了一个项目 quicklink,quicklink 能在空闲时预取 viewport 内的链接来加快后续页面的加载速度。具体的技术原理和实现过程请看下文。

工作原理

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


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

  • 等待浏览器空闲,使用requestIdleCallback

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

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

为什么要推出 quicklink?

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

安装

npm install --save quicklink
复制代码


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

用法

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


<!-- 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();

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

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

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 匹配之后执行。


待完成事项:


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

  • 使用Priority Hints进行重要性提示。

polyfill

quicklink:


  • 可以回退到 requestIdleCallback;

  • 需要支持 IntersectionObserver,请参阅CanIUse。我们建议使用 Polyfill.io 等服务来有条件地 polyfill 该功能:


<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
复制代码

一些示例

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

默认为 2 秒(通过 requestIdleCallback),在这里我们将其设置为 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    'other-website.com',    'example.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


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


  • Network Information API,用于检查用户的连接类型(通过 navigator.connection.effectiveType),仅适用于 Chrome 61+和 Opera 57+。

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

直接使用 prefetcher

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


<script type="module">import prefetch from '../src/prefetch.mjs';
const urls = ['1.html', '2.html'];const promises = urls.map(url => prefetch(url));Promise.all(promises);</script>
复制代码

演示

这里是一个 WebPageTest演示


通过使用 quicklink,将页面加载时间减少了 4 秒。这里是进行预取前后的比较视频


出于演示的目的,我们在 Firebase 上部署了一个谷歌博客,然后我们又部署了另一个版本,在主页上添加了 quicklink,并测试从主页导航到文章的速度,结果预取版本的加载速度更快。


请注意:这并不是一个针对 viewport 内链接预取优缺点的详尽基准测试,我们只是演示了这个方法可以为我们带来的潜在改进。


英文原文:https://github.com/GoogleChromeLabs/quicklink


更多内容,请关注前端之巅。



2019-01-25 07:0018041
用户头像

发布了 731 篇内容, 共 469.3 次阅读, 收获喜欢 2007 次。

关注

评论 1 条评论

发布
用户头像
这个好
2019-01-27 10:48
回复
没有更多了
发现更多内容

Ajax学习笔记(二)

lxmoe

前端 学习笔记 11月月更

部署 jenkins master 及多 slave 环境

忙着长大#

jenkins

TCP/IP-ARP网络攻击与欺骗

我叫于豆豆吖.

11月月更

【C语言】long 关键字

謓泽

11月月更

【Logback+Spring-Aop】实现全面生态化的全链路日志追踪系统服务插件「SpringAOP 整合篇」

码界西柚

log4j logback 链路追踪组件 日志追踪

AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER

No Silver Bullet

angular.js 路由 11月月更 ANGULARUI

【LeetCode】统计一致字符串的数目Java题解

Albert

算法 LeetCode 11月月更

Java顶层类Object类(toString、equals)

共饮一杯无

Java Object 11月月更

二阶思维

元闰子

人生 思维 二阶思维

部署 Jenkins 服务器并安装 GitLab 插件、实现代码免秘钥代码 clone

忙着长大#

jenkins

部署PKI 和证书服务

我叫于豆豆吖.

11月月更

DNS服务器

我叫于豆豆吖.

11月月更

Ajax学习笔记

lxmoe

前端 学习笔记 11月月更

Linux 安装

芯动大师

Linux Linux操作系统 11月月更

计算机网络:广域网的基本概念

timerring

计算机网络 11月月更 广域网

管理与系统思维

俞凡

管理 系统思维

任意代码执行漏洞复现

网络安全学海

网络安全 安全 信息安全 渗透测试 漏洞分析

最新版FL Studio2023水果中文版音乐制作软件

茶色酒

FL Studio FL Studio 21 FL Studio2023

Mimir 速体验(Part 6): 规则评估和告警管理

Grafana 爱好者

可观测性 #Grafana 11月月更 Mimr

【LeetCode】自定义字符串排序Java题解

Albert

算法 LeetCode 11月月更

设计模式之美——多用组合少用继承?

GalaxyCreater

设计模式

WordPress零门槛的付费阅读插件:WPPAY

ABC实验室

算法题学习---删除有序链表中重复的元素-I

桑榆

算法题 11月月更

运维进阶训练营 -W04H

b1a2e1u1u

运维

DCM:中间件家族迎来新成员

石臻臻的杂货铺

后端 SPL 11月月更

架构误区系列6:过度异步化

agnostic

定时任务 支付系统 消息队列

Spring 5(七)Webflux

浅辄

Spring5 WebFlux 11月月更

设计模式之美-为什么要基于接口而非实现编程?

GalaxyCreater

设计模式

关于python的成员方法,类方法,静态方法

乔乔

11月月更

支付API设计

agnostic

API

基于 jenkins 视图对 jenkins job 进行分类

忙着长大#

jenkins

加载时间从4.6s降到0.7s,谷歌开源quicklink_大前端_Geek_q4vipd_InfoQ精选文章