【怎么理解回流跟重绘?什么场景下会触发?】

浏览器解析渲染机制的图：

• 首先解析HTML，生成DOM树，解析CSS，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
•  Layout(回流)：根据生成的渲染树，进行回流，得到节点的几何信息（位置，大小）
• Painting(重绘)：根据渲染树以及回流得到的几何信息，得到节点的绝对元素
• Display:将像素发送给GPU，展示在页面上

在页面初始渲染阶段，回流不可避免地欻，可以理解成页面一开始是空白地元素，后面添加了新的元素使页面布局发生改变

当我们对dom地修改引发了dom几何尺寸地变化时，浏览器需要重新计算元素地几何属性，然后再将计算的结果绘制出来

当我们对dom的修改导致了样式的变化，却ing为影响其几何属性时，浏览器不需要重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘

回流一定会导致重绘，但是重绘不能导致回流

回流：【在布局之后对元素的大小、位置进行改变】

当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就是回流

下面这些操作会导致回流:

dom结构发生变化（添加新的节点或者移除节点）

布局发生更改（修改width   height   padding   font-size等值）

窗口大小发生变化

调用getComponentStyle方法获取尺寸、位置信息

内容发生变化，例如：文本变化还活着图片被另一个不同尺寸的图片所代替

页面一开始开始渲染的时候

重绘：【在第一次绘制完成页面后，重新绘制的过程】

当页面中某些元素的样式发生变化，到那时不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘

重绘触发的时机：

修改网页内容样式的时候，比如文字颜色，背景颜色，边框颜色，文本方向的修改

触发回流一定会触发重绘

如何避免回流？

修改样式的时候，尽量一次性修改

尽量避免频繁的dom操作

尽量避免通过getComponentStyle获取尺寸、位置信息

对某些元素使用position的absoulute或者fixed

避免设置多项内联样式

避免使用css的javascript表达式