从原理层面解释前端大数据量性能优化系列——分片加载

这里写自定义目录标题分片加载背景解决方案setTimeoutrequestAnimationFrame分片加载背景我们知道浏览器渲染时如果节点宽高有变化会触发重排进而引起重绘大部分浏览器在一秒钟内可以显示的最大帧数是60(FPS60Hz)。可以理解为两帧之间的最大间隔时长是1000/60ms而如果当浏览器渲染某一帧的时长超过了1000/60ms就会挤占掉下一帧的渲染时间当前帧渲染完毕而时间却没有用完就会出现空白、卡顿的现象掉帧解决方案分片加载的核心原理就是主动打断长任务让出主线程把大任务切分成多个小任务与浏览器的帧率对齐。setTimeout最直接的想法我们可以使用setTimeout分片但是问题也是显而易见的浏览器对嵌套的setTimeout有最小间隔限制通常大于等于 4ms。这意味着在每 1000/60ms 的渲染周期中有 4ms 被白白浪费降低了执行效率。并且setTimeout 只是将回调“塞进队列等待”它不保证准时执行容易受到其他宏任务或微任务的阻塞影响。requestAnimationFrame所幸我们有更好的解决方案requestAnimationFrame是 HTML5 新增的 API它的核心优势在于与浏览器的渲染心跳同频共振主要用于在浏览器的下一次重绘之前调用指定的回调函数。如果系统绘制率是 60Hz那么回调函数就会 1000/60ms 再 被执行一次。这保证了你的代码永远在浏览器绘制新一帧之前执行浏览器可以一气呵成地完成后续渲染完美避免了中间状态的撕裂。需要注意的一点是当页面不可见如快速滚动导致元素移出视口或切换了标签页时浏览器会自动暂停requestAnimationFrame的执行从而节省电量和 CPU 资源。而这可能会带来一个问题如果你的业务逻辑依赖于持续不断的后台更新使用requestAnimationFrame会导致任务中断。