背景这几天领导来找我说我们的H5页面有很多内置链接，这些链接打开速度有点慢。你有什么优化的方法吗？或者有什么好的解决办法可以说说，我心里想着，提高速度的办法只有这么几种。如果我优化不好，我怕在现在的就业形势下会被优化。其实按照惯性，本质上就是打开速度慢。作为前端，我们只能从以下三点优化优化资源，请求并行优化代码，提高渲染速度，告诉后端接口响应更快。这三种无论是哪一种，提升的速度都只能说是一般，毕竟我们已经做了相关的优化，然后就出现了输出和人力的不匹配。除此之外，有些链接不属于我们。有什么办法吗？能换个角度看问题吗？由于打开了H5页面，所有的链接都被嵌入了。如果我们找到这个链接，提前加载它就足够了。前几天刚看到一个库，quicklink，chrome浏览器团队出品，它可以加快打开链接的速度https://github.com/GoogleChromeLabs/quicklink真的有这么神奇吗？我们先来看看这个库的基本原理。它的主要作用是通过空闲时间提前获取视口中的链接进行预渲染或预加载，以便我们后面打开的链接可以快速检测视图。Port元素首先需要知道哪些元素进入视口，从而获取进入视口元素的链接，所以第一步是查看哪些元素进入视口IntersectionObserver，这是JS中的一个API，主要用到检测目标元素是否到达指定位置。这个API非常有用。在检测之前，我们会不断地查看某个元素的位置信息和高度信息，进行比较、判断，做一些我们想做的事情。有了这个API，就可以轻松实现图片的懒加载、上拉加载和下拉刷新等操作，元素到达某个位置执行什么操作，之前一直用到的滚动事件的监听等简化了很多，比如检测红色方块是在屏幕内还是屏幕外，可以用下面的代码constio=newIntersectionObserver((o)=>console.log(o),{})io.observe(document.getElementsByTagName('div')[0])如果元素在屏幕上出现或消失，则打印o的数据。具体可以查看MDN，然后在视图中获取元素找到元素对应的链接，链接会获取浏览器空闲时间requestIdleCallbackapi虽然是一个实验性的功能，但是目前所有主流浏览器都可以使用。它的主要功能是在浏览器空闲时执行一些功能。用法是在这个函数中传入一个要执行的函数。函数，如window.requestIdleCallback(()=>console.log('我会在浏览器空闲时调用'))检测连接状态对于一些使用慢速网络的用户，我们需要检测用户当前的网络状态advance，网络不好的情况下，不使用预加载的方式。navigator.connection.effectiveType//4g如果用户想减少流量使用，可以使用下面的api检测并返回一个boolean值navigator.connection.saveData//booleanpreloadpreload链接预取有几种方式。最简单的就是给页面添加一个链接标签
