扫一扫分享
quicklink是一个js库,通过在空闲时间预先获取viewport内的链接,加快后续页面加载速度,可以预加载出现在视口的网页链接,提高用户体验。它的加载过程如下:
1.检测网页中的链接是否出现在视口中,等待链接出现在视口,执行步骤2。
2.等待浏览器空闲后执行3。
3.判断当前的网络连接是否是2G,如果是则停止执行,如果不是2G网络,执行步骤4。
4.预加载链接指向资源。
quicklink旨在成为根据用户viewport中的链接预取内容的简易解决方案,并保持很小的体积(压缩后小于1KB)。 quicklink加速后续页面加载速度的原理如下:
检测viewport中的链接(使用Intersection Observer)
等待浏览器空闲(使用requestIdleCallback)
检查用户的连接速度(使用navigator.connection.effectiveType)
或者是否启用了data-saver(使用navigator.connection.saveData);
预取链接(使用<link rel=prefetch>或XHR),可以控制请求优先级(如果支持,可以切换到fetch())。
仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!
手机预览