重绘
当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘。
重排(回流)
当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程
总结
重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置)
引起重排场景
- 添加、删除可见的dom
- 元素的位置改变
- 元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)
- 页面渲染初始化
- 浏览器窗口大小改变
- 设置style属性
- 改变文字大小
- 添加/删除样式表
- 激活伪类,如:hover
- 操作class属性
- 内容的改变,(用户在输入框中写入内容也会)
如何减少重绘
- 不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class,然后修改 DOM 的 className。
- 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
- 为动画的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他们的 CSS 是不会 reflow 的。
- 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)
- 不要在布局信息改变的时候做查询(会导致渲染队列强制刷新)
- 用translate替代top改变
- 用opacity替代visibility(在独立图层下优化重绘)