首先要理解浏览器的网页加载
-
js线程->JS脚本执行
-
GUI线程->渲染html 浏览器布局、绘制
我们知道，JS可以操作DOM，GUI渲染线程与JS线程是互斥的。所以JS脚本执行和浏览器布局、绘制不能同时执行。
刷新率为60hz的浏览器，每秒更新60帧画面，每次更新耗时16.6ms，每次更新都会做以下3件事，在每16.6ms时间内，需要完成如下工作：
JS脚本执行 ----- 样式布局 ----- 样式绘制
当JS执行时间过长，超出了16.6ms，这次刷新就没有时间执行样式布局和样式绘制了。 就会出现我们遇到过的：JS脚本执行时间过长，页面掉帧，造成卡顿。
上面说到的每一帧内执行的事件如图：
如果在（16.6ms）内执行完，则可以保证60帧，画面流畅；如果500ms甚至2000ms则页面明显卡顿
requestIdleCallback 和 requestAnimationFrame
requestAnimationFrame：在每一帧中一定执行，样式变更以及布局计算之前就执行
requestIdleCallback：在每一帧不一定执行，样式变更以及布局计算之后空闲时才执行
