内容简介:近日,Google 团队在 GitHub 上开源了一个项目 quicklink,quicklink 能在空闲时预取 viewport 内的链接来加快后续页面的加载速度。具体的技术原理和实现过程请看下文。quicklink 通过以下措施加快后续页面的加载速度:quicklink 旨在成为根据用户 viewport 中的链接预取内容的简易解决方案,而且要保持很小的体积(压缩后小于 1KB)。
近日,Google 团队在 GitHub 上开源了一个项目 quicklink,quicklink 能在空闲时预取 viewport 内的链接来加快后续页面的加载速度。具体的技术原理和实现过程请看下文。
工作原理
quicklink 通过以下措施加快后续页面的加载速度:
-
检测 viewport 中的链接,使用 Intersection Observer 。
-
等待浏览器空闲,使用 requestIdleCallback 。
-
检查用户的连接速度(使用 navigator.connection.effectiveType)或者是否启用了 data-saver(使用 navigator.connection.saveData);
-
预取链接(使用
或 XHR),可以控制请求优先级(如果支持,可以切换到 fetch())。
为什么要推出 quicklink?
quicklink 旨在成为根据用户 viewport 中的链接预取内容的简易解决方案,而且要保持很小的体积(压缩后小于 1KB)。
安装
复制代码
npminstall--save quicklink
也可以从 unpkg.com/quicklink
下载 quicklink。
用法
在初始化后,quicklink 将自动在空闲时预取 viewport 内的链接。
复制代码
<!-- Include quicklink from dist --> <scriptsrc="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 该功能:
复制代码
<scriptsrc="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
一些示例
设置自定义的资源预取超时时间
默认为 2 秒(通过 requestIdleCallback),在这里我们将其设置为 4 秒:
复制代码
quicklink({ timeout:4000 });
设置包含预取 URL 的 DOM 元素
如果不设置,默认为 document。
复制代码
constelem =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 作为依赖项安装好以后,可以按如下方式使用它:
复制代码
<scripttype="module"> importprefetchfrom'../src/prefetch.mjs'; consturls = ['1.html','2.html']; constpromises = urls.map(url=>prefetch(url)); Promise.all(promises); </script>
演示
这里是一个 WebPageTest 演示 。
通过使用 quicklink,将页面加载时间减少了 4 秒。这里是进行预取前后的比较 视频 。
出于演示的目的,我们在 Firebase 上部署了一个谷歌博客,然后我们又部署了另一个版本,在主页上添加了 quicklink,并测试从主页导航到文章的速度,结果预取版本的加载速度更快。
请注意:这并不是一个针对 viewport 内链接预取优缺点的详尽基准测试,我们只是演示了这个方法可以为我们带来的潜在改进。
英文原文: https://github.com/GoogleChromeLabs/quicklink
更多内容,请关注前端之巅。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 加载时间从4.6s降到0.7s,谷歌开源quicklink
- 全局最优解?为什么 SGD 能令神经网络的损失降到零
- React 出海应用 首屏加载时间从20S降到10S以下 血泪史
- [译] 读懂 MySQL Explain 结果,上亿数据的查询耗时从几分钟降到 63 毫秒
- 网易云首席安全架构师谈安全新形势:DDOS两三天,游戏玩家数从几万降到几百
- 聆听中国开源最强音 | 国内大厂开源项目齐聚 OSCAR 开源先锋日
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。