从事前端工作也有大半年了，但刷题要是遇到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、对复杂动画效果，使用绝对定位让其脱离文档流
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/176976.html