本文内容：
- 回流
- 重绘
- 如何避免回流和重绘
1. 回流
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。
下面这些操作会导致回流：
● 页面的首次渲染
● 浏览器的窗口大小发生变化
● 元素的内容发生变化
● 元素的尺寸或者位置发生变化
● 元素的字体大小发生变化
● 激活CSS伪类
● 查询某些属性或者调用某些方法
● 添加或者删除可见的DOM元素
在触发回流（重排）的时候，由于浏览器渲染页面是基于流式布局的，所以当触发回流时，会导致周围的DOM元素重新排列，它的影响范围有两种：
● 全局范围：从根节点开始，对整个渲染树进行重新布局
● 局部范围：对渲染树的某部分或者一个渲染对象进行重新布局
2. 重绘
当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。
下面这些操作会导致回流：
● color、background 相关属性：background-color、background-image 等
● outline 相关属性：outline-color、outline-width 、text-decoration
● border-radius、visibility、box-shadow
注意： 当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。
3. 如何避免回流和重绘
如果对页面经常进行回流和重绘，那么网页的性能肯定是要收到影响的。
减少回流与重绘的措施：
● 操作DOM时，尽量在低层级的DOM节点进行操作
● 不要使用table布局， 一个小的改动可能会使整个table进行重新布局
● 使用CSS的表达式
● 不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。
● 使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素
● 避免频繁操作DOM，可以创建一个文档片段documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中
● 将**元素先设置display: none，操作结束后再把它显示出来。**因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
● 将DOM的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。
浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列
浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。
上面，将多个读操作（或者写操作）放在一起，就会等所有的读操作进入队列之后执行，这样，原本应该是触发多次回流，变成了只触发一次回流。
标签：浏览器,DOM,前端,元素,操作,回流,重绘 来源： https://blog.csdn.net/qq_41867900/article/details/120824019
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。