重绘与回流

浏览器的渲染过程

1.解析获取到的HTML，生成DOM树，解析CSS，生成CSSOM树 
2. 将DOM树和CSSOM树进行结合，生成渲染树（render tree）
3.根据生成的渲染树，进行回流（Layout）,得到节点的几何信息（位置，大小）
4.重绘（Painting）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素（像素，背景色，外观等）
5.Display将像素发送给GPU，展示在页面上。

重绘

在渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不影响布局，就称为重绘。简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。
会发生重绘的情况

• 背景色改变

• 样式发生改变的时候

  回流

  浏览器会把获取到的HTML代码解析成一个DOM树，html中的每一个元素都是DOM树的一个节点，根节点也就是我们说的document对象。在渲染树中的一部分（或者全部）因为元素的规模尺寸、布局 、显隐等改变而需要重新构建，这就称为回流。每次页面至少会发生一次回流，就是在页面第一次渲染的时候。
  会发生回流的情况：

• 添加或者删除可见的DOM元素

• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边距、边框大小、高度和宽度等）
• 内容发生变化，文本或者图片被另一个不同尺寸的图片所代替
• 页面开始渲染的时候
• 浏览器的窗口尺寸变化（回流是根据视口的大小来计算元素的位置和大小的）

优化

1.多个属性尽量使用简写，例如：boder可以代替boder-width、boder-color、boder-style
2.创建多个dom节点时，使用documentfragment创建
3.避免使用table布局
4.避免设置多层内联样式，避免节点层级过多
5.避免使用css表达式
6.将频繁重绘或回流的节点设置为图层，图层能够阻止该节点的渲染行为影响到别的节点（例：will-change\video\iframe等标签），浏览器会自动将该节点变为图层

总结

重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流。
回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘。
不管怎么说都是会影响性能。