介绍

当代Web无论在哪个操作系统中，应用都很流行Web对应用程序的支持是必不可少的，因为许多应用程序只需要一个浏览器就可以使用。Web应用的普及带来了越来越多的问题。一方面，框架越来越多样化，各种各样MVVM，各种响应类型等。另一个问题是性能问题，在Web应用程序也是一个主要的痛点，因为性能是用户体验良好的前提，基于美丽的界面，性能也是一个主要的关键，有很多方法和方面来优化性能，今天介绍其中一个——预加载，通过预加载加速Web应用！

Github

这是目前的开源项目star数已经达到7k+,这表明它仍然很受欢迎，相应的项目标签是

performanceweb-performanceprefetchprefetcherspeed

所有这些都反映了它是用来改进的web应用性能，以下是项目地址，可能已经被很多人使用过了个来自Chrome团队实验项目：

https://github.com/GoogleChromeLabs/quicklink

一句话解释

加快后续页面的加载速度

它是如何工作的？

主要通过以下几个方面：

检测页面中的URL(Intersection_Observer)检查浏览器是否空闲（requestIdleCallback）检查用户是否处于慢速连接状态

使用

navigator.connection.effectiveType）或者使用数据保护程序(使用数据保护程序)

navigator.connection.saveData 预取链接的URL（使用<link rel = prefetch>或XHR

提供求优先级提供一些控制(如果支持，可以切换到fetch)

安装

可以通过node中的npm安装

npm install –save quicklink

使用

初始化后，quicklink在空闲时间内自动提取视口中的链接URL

<!–js引入 –> <script src=”dist/quicklink.umd.js”></script> <script> quicklink(); </script>

或者

ES模块导入：

import quicklink from “quicklink/dist/quicklink.mjs”; quicklink();

API

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

要检测的DOM提取链接的元素

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

预读取的url数组

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

requestIdleCallback加时数字。浏览器必须执行预付时间(以毫秒为单位)。默认为2秒。

quicklink({ timeout: 4000 }); timeoutFn

用于指定加时函数。requestIdleCallback。也可替换networkIdleCallback等自定义函数

priority

Boolean指定提取的首选优先级。false。true将尝试使用fetch()支持的API（而不是rel = prefetch）

quicklink({ priority: true }); origins

允许预取的URL主机名字符串的静态数组。默认为相同的域源，可以防止任何跨源请求。

quicklink({ origins: [ 站点1, 站点2, 其他站点, 等等站点, ] }); quicklink({ origins: true, origins: [] }); ignores

RegExp，Function或Array，用于进一步确定是否应提取URL。匹配后执行这些

quicklink({ ignores: [ //api/?/, uri => uri.includes(.zip), (uri, elem) => elem.hasAttribute(noprefetch) ] }); quicklink({ ignores: [ uri => uri.includes(#) // or RegExp: /#(.+)/ // or element matching: (uri, elem) => !!!elem.hash ] });