回流与重绘
重绘是指当页面中元素的样式发生改变(如颜色、阴影、边框等)而不影响它在文档流中的位置时,浏览器会对这些元素进行重新绘制,这个过程称为重绘
回流是指页面中元素的尺寸、结构或某些属性发生改变时,浏览器需要重新计算元素的大小和位置,然后再重新渲染页面的过程
回流必定会触发重绘,但重绘不一定会引起回流
触发回流的常见情况包括:
- 添加或者删除可见的 DOM 元素
- 元素位置/尺寸/内容发声改变
- 浏览器窗口大小发生变化
- 应用 CSS 样式的改变
引起回流的样式改变:
- 改变元素的尺寸(width、height、padding、margin等)
- 改变元素位置(top、left、right、bottom等)
- 改变元素显示(display:none)
- 添加或删除可见的 DOM 元素
- 改变元素字体
- 改变浏览器窗口大小
引起重绘的样式改变:
- 改变元素颜色
- 改变元素背景颜色
- 改变元素阴影
- 改变元素边框
所以在页面优化优性能时,我们应该尽量减少触发回流的操作,一些常见的优化手段:
- 批量修改DOM(Render 的批处理也会如此考虑的)
- 使用 transform 代替 top/left
- 使用 visibility 代替
display:none
- 尽量减少不必要的样式改变
- 将颜色、背景颜色、边框等发生重绘的样式写在 CSS 样式的前头