重绘和回流
浏览器的渲染机制如下图所示:
![](https://img2020.cnblogs.com/blog/2115066/202010/2115066-20201008175017761-1729605792.png)
对于上图的流程可以总结为:
- 解析HTML,构建生成 DOM Tree。
- 解析CSS,构建生成 CSSOM Tree(css样式树)。
- 将构建生成的 DOM Tree 和 CSSOM Tree 结合,构建生成 Render Tree(渲染树)
- 回流(Reflow):根据生成的 Render Tree 进行节点信息的计算,获取节点的几何信息(位置,大小等)及样式
- 重绘(Repaint):根据计算和获取的信息进行整个页面的绘制。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、outline等), 称为重绘。
回流
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的过程称为 回流。
重绘不一定引起回流,而回流一定会引起重绘。
会导致回流的操作:
- 页面的首次刷新
- 浏览器的窗口大小发生改变
- 元素的大小或位置发生改变
- 改变字体的大小
- 内容的变化(如:input框的输入,图片的大小)
- 激活css伪类 (如::hover)
- 脚本操作DOM(添加或者删除可见的DOM元素)
一些常用且会导致回流的属性和方法:
- clientWidth、clientHeight、clientTop、clientLeft
- offsetWidth、offsetHeight、offsetTop、offsetLeft
- scrollWidth、scrollHeight、scrollTop、scrollLeft
- scrollIntoView()、scrollIntoViewIfNeeded()
- getComputedStyle()
- getBoundingClientRect()
- scrollTo()
如何将回流的影响降到最低:
- 如果想设定元素的样式,通过改变元素的 class 名(尽可能在 DOM 树的最末端)
- 避免设置多项内联样式
- 应用元素的动画,使用 position 属性的 fixed 值或 absolute 值
- 权衡平滑和速度
- 避免使用table布局
- 避免使用CSS的Javascript表达式(仅IE浏览器)
- 避免使用CSS表达式(列如:calc())