浏览器的回流和重绘怎么理解

浏览器的回流和重绘浅谈

页面的回流和重绘会影响JavaScript的性能，如果你的html很大很复杂，页面回流和重绘是一个非常值得关注的点。对于重绘和回流的概念不是很清晰，查看了许多博文，在这里说一下自己的理解！！欢迎同学们与我交流。

什么是回流

当Render Tree中部分或全部元素尺寸、结构或某些属性发生改变的时候，浏览器会重新渲染部分或全部的文档的过程做回流。回流必将引起重绘，而重绘不一定会引起回流。

什么是重绘

当页面上的元素样式改变并不会影响到他在文档流的位置，浏览器会将新样式赋给他并且重新绘制，这个过程叫做重绘。

回流和重绘常见的触发方式

常见会引起回流和重绘的样式属性有：display:none;visibility: hidden;font-size;color;background-color等常见的方式还有像js中通过操作DOM进行一些列的添加、删除元素等一系列操作，css伪类激活，调整窗口的大小或者浏览器窗口尺寸改变—resize事件发生时都会引起回流。

如何减少重绘和回流

1、想要改变元素样式，通过改变元素的 class 名 (尽可能在 DOM 树的最末端改变class)
2、避免设置多项内联样式，因为每个都会造成回流，样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一个reflow。
3、在操作offset**** 、scroll***、client***、width/height等属性时，先用变量先进行存储，在进行操作。

重绘和回流也是为什么要减少dom操作的原因之一。

本文地址：https://blog.csdn.net/qq_45335911/article/details/107872175