持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情
前端性能优化中有分为好几大类，如浏览器渲染引擎与阻塞、函数的防抖和节流、浏览器的存储等等，这里我们要介绍的是关于重绘和重排的知识点，
CSS图层
浏览器在渲染页面时，会将页面分为多个图层。
工作流程:
- 获取DOM后分割为多个图层
- 对每个图层的节点计算样式结果 ---(Recalculate style --样式重计算)
- 为每个节点生成图像和位置 (layout --重排，回流)
- 将每个节点绘制填充到图层位图中 (Paint---重绘)
- 图层作为纹理上传到GPU
- 组合多个图层到页面上生成最终屏幕图像 (Composite Layers ---图层重组)
图层创建条件 (只以谷歌为例)：
- 拥有3D变换的CSS属性
- 使用加速视频解码的video节点
- canvas节点
- CSS3动画的节点
- 拥有CSS加速属性的元素(will-change)
- 谷歌浏览器主要满足以上任意情况就会自动创建图层
图层示例如下：
重绘 --Repaint
是什么:当一个元素的外观发生改变时，而触发 的浏览器行为。
重绘不会带来重新布局，所以并不一定伴随重排
重排(也叫 回流 )--Reflow
是什么:当某个元素的位置发生改变时而触发
重排的消耗的资源比重绘高的多!
注意点
-
重绘不一定需要重排，但重排必然导致重绘！
-
重绘和重排都是以图层为单位的。
-
一个图层中某个元素触发重绘，则整个图层都需要重绘
-
display:none 会触发重排而visibility：hidden 只会触发重绘，因为没有发生位置变化
优化手段
1、不要一条一条的修改DOM的样式，可以先定义好css的class，然后修改DOM的className。
2、不要把DOM结点的属性值放在一个循环里当成循环里的变量。
3、为动画的HTML元件适用fixed或absolute的position，那么修改他们的css是不会reflow
