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