浏览器的一帧
前面我们提到如何使用requestAnimationFrame来检测是否产生了卡顿。除此之外,如果你也处理过简单的异步任务管理(闲时执行等),还可以使用requestIdleCallback来检测卡顿。其实,requestAnimationFrame和requestIdleCallback都会在浏览器的每一帧中被执行到,以下是执行的时序图。
图片
每次浏览器渲染的过程顺序为:
-
用户事件。
-
一个宏任务。
-
队列中全部微任务。
-
requestAnimationFrame。
-
浏览器重排/重绘。
-
requestIdleCallback。
我们常用的事件监听的顺序则如下图。
图片