重排重绘
2023-06-16 21:20:29
重排：重排意味着元素的位置和几何形状发生了改变，它影响了部分布局或整个页面的情况下，一个元素的重排可能需要同时对其父级元素及其后面的所有元素进行重排。
重绘：重绘发生在元素可见性发生改变并且不影响不布局的情况下，比如：visibility，background-color，outline 发生改变会触发重绘。
- 重排会发生在添加、删除以及更新 DOM 节点时
- 使用 display:none 隐藏 DOM 元素，会同时导致重排和重绘
- 使用 visibility:hidden 只会造成重绘，因为没有布局和位置的改变，所以不发生重排
- 移动或执行一个 DOM 节点都会触发重绘和重排
- 调整浏览器窗口的大小会触发重排
- 改变 font-style 意味着改变了元素几何形状，会影响其它元素的位置和尺寸，所以同时会要求浏览器执行重排。一旦这些布局操作完成，那么任何被损坏的像素点都会被重绘
- 添加或移除 Stylesheet 都会造成重排和重绘
WARNING
重排是一个非常昂贵的操作，大部分重排都会导致页面被重新渲染。它是导致 DOM 脚本执行缓慢的主要原因之一，特别是在移动手机端。在大部分情况下，重排等同于重新进入一次页面
css transform 为什么不会触发重排
- 因为 GPU 进程会为其开启一个新的复合图层，不会影响默认复合图层(就是普通文档流)，所以并不会影响周边的 DOM 结构而属性的改变也会交给 GPU 处理，不会进行重排。