重绘和回流（重绘回流区别）



从事前端工作也有大半年了，但刷题要是遇到repaint或reflow的时候，还是会想不起它们的区别。现在对它们做个总结，彻底掌握它们！

指的是屏幕的一部分要重绘。渲染树节点发生改变，但不影响改节点在页面当中的空间位置和大小。比如某个div标签节点的背景颜色、字体颜色等等发生改变，但改div标签节点的宽、高、内外边距并没有发生改变，此时就会触发浏览器的重绘。

也称为重排，当渲染树节点发生改变，影响了该节点的几何属性（如宽高、内外边距、或者是float、position、dispaly:none等），导致节点的位置发生变化，此时就会触发浏览器重排，需要重新生成渲染树。比如某个标签添加样式：display:none，该标签后的所有节点位置都会被改变，此时浏览器需要重新生成渲染树，重新布局，即回流。

需要注意的是：

清楚了重绘和回流的含义后，那么什么时候会引起回流呢？

当页面布局和几何属性改变时就需要回流：

1、添加或删除可见的dom元素；

2、元素位置改变：display、float、position、overflow等等；

3、元素尺寸改变：宽高、内外边距、填充、边框等；

4：内容改变：比如文本或者图片大小改变而引起的计算值宽高的改变；

5：页面渲染的初始化；

6：浏览器窗口尺寸改变：resize事件发生时；

7：激活CSS伪类

回流对浏览器渲染并不是什么好事，那如何减少和避免回流，优化浏览器渲染过程？

其实优化就是减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略。

1、先display:none隐藏元素，然后对该元素进行所有的操作，最后再显示该元素，因为对display:none的元素进行操作不会引起回流、重绘；

2、减少操作影响的节点，影响的节点越多，则越消耗性能；

3、对复杂动画效果，使用绝对定位让其脱离文档流

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/13531.html