86、浏览器的16ms渲染帧

由于主流的屏幕刷新率都在 60Hz，那么浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。

1、什么是渲染帧

渲染帧是指浏览器一次完整绘制过程，浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间，页面的渲染就会出现卡顿现象。这段时间内浏览器需要完成如下事情：

• 脚本执行（JavaScript）：脚本造成了需要重绘的改动，比如增删 DOM、请求动画等
• 样式计算（CSS Object Model）：级联地生成每个节点的生效样式。
• 布局（Layout）：计算布局，执行渲染算法
• 重绘（Paint）：各层分别进行绘制（比如 3D 动画）
• 合成（Composite）：合成各层的渲染结果

详细介绍参考：浏览器的 16ms 渲染帧 | Harttle Land

2、浏览器渲染基本原理

参考：https://blog.youkuaiyun.com/csdnnews/article/details/95267307