重绘和回流有什么区别（CSS）
重绘与回流事前端中经常提及的词汇，⽽具体重绘和回流分别做了哪些事情，他们两者之间的区别⼜是什么呢？
⼀：⾸先我们要了解HTML的加载过程
我们先看⼀下下⾯这张图：
具体做了哪些操作呢？
1.解析HTML，⽣成DOM树，然后也会解析CSS，⽣成CSSOM树就如上六边形；
2.将DOM树和CSSOM树结合，⽣成渲染树(Render Tree)，这⼀过程称为Attachment，渲染树并不等同于Dom树，因为像head标签 或display: none这样的元素就没有必要放到渲染树中了，但是它们在Dom树中；
3.Layout(回流)：对渲染树进⾏布局，定位坐标和⼤⼩、确定是否换⾏、确定position、overflow、z-index等等，这个过程叫layout
4.Painting(重绘)：根据渲染树以及回流得到的⼏何信息，得到节点的绝对像素
5.绘制渲染树，调⽤操作系统底层API(UI Backend)进⾏绘图操作（这个步骤⽐较复杂有兴趣的同学可以去深⼊了解）。
构建渲染树是从DOM树的根节点开始遍历每个可见节点，然后对于每个可见的节点，到CSSOM树中对应的规则，并应⽤它们。但是这⾥并不是每⼀个节点都是可见的!例如：script、meta、link的标签，css的样式display:none，注意，利⽤visibility和opacity隐藏的节点，还是会显⽰在渲染树上的。
⼆：什么是回流
当render tree中的因为元素的规模尺⼨，布局，隐藏等改变⽽需要重新构建。这就称为回流(Reflow)。⽽每个页⾯⾄少会进⾏⼀次回流，在页⾯第⼀次加载的时候，这时候是⼀定会发⽣回流的，因为要构建Render Tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。具体引起回流的点如下：
css最新
1、添加或者删除可见的DOM元素；
2、元素位置改变；
3、元素尺⼨改变——边距、填充、边框、宽度和⾼度
4、内容改变——⽐如⽂本改变或者图⽚⼤⼩改变⽽引起的计算值宽度和⾼度改变；
5、页⾯渲染初始化；
6、浏览器窗⼝尺⼨改变——resize事件发⽣时，因为回流是根据视⼝的⼤⼩来计算元素的位置和⼤⼩的；
三：什么是重绘
完成回流后，浏览器会重新绘制受影响的部分到屏幕中，当render tree中的⼀些元素需要更新属性，⽽这些属性只是影响元素的外观，风格，⽽不会影响布局的，⽐如background-color。则就叫称为重绘。
四：重绘与回流的区别
回流必将引起重绘，⽽重绘不⼀定会引起回流，这个是⼀个关键点，只有颜⾊改变的时候就只会发⽣重绘⽽不会引起回流，回流往往伴随着布局的变化，代价较⼤，重绘只是样式的变化，结构不会变化
五：如何性能优化? 尽量减少重绘与回流的次数
1.减少Dom的增删⾏为
⽐如你要删除某个节点，给某个⽗元素增加⼦元素，这类操作都会引起回流。如果要加多个⼦元素，最好使⽤documentfragment
2.样式集中改变
在⼀些元素宽⾼变了，border变了，字体⼤⼩变了等这个时候都会引起回流，这个时候我们可以给相同操作的给⼀个className，这样就只会有⼀次的回流，少⽤style设置样式。
3.使⽤脱离⽂档流的⽅法改变位置
将position属性设置为absolute或fixed，position属性为absolute或fixed的元素等⽅法属于脱离⽂档流，不会频繁的产⽣回流
4.避免循环读取offsetLeft等属性。在循环之前把它们存起来。
例如获取⼀个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值，所以如果你要多次操作，最取完做个缓存。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。