重绘和回流

概念

解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树，将 DOM 树和
CSSOM 树结合生成渲染树(Render Tree)

Layout(回流)

当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候，这时候就会发生回流。根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

Painting(重绘)

在回流的时候，浏览器会使渲染树中受到影响的元素部分失效，并重新绘制这个部分的渲染树，完成回流以后，浏览器会重新绘制受到影响的部分元素到屏幕中，这个过程就是重绘。根据渲染树以及回流得到的几何信息，得到节点的绝对像素。

发生场景

• 什么时候会发生回流和重绘

1. 添加或删除可见的 DOM 元素
2. 元素的位置发生变化
3. 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
4. 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
5. 页面一开始渲染的时候（这肯定避免不了）
6. 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大 小的）
7. 回流一定会触发重绘，而重绘不一定会回流

如何避免或者减少回流和重绘

• 如何减少回流，重绘？

1. 修改 html 元素中对应的 class 名，利用 class 替换样式
2. csstext（利用 cssText 属性合并所有改变，然后一次性写入）
3. display:none（隐藏元素，应用修改，重新显示））