面试官：说说回流和重绘吧

本文主要是介绍面试官：说说回流和重绘吧，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 回流

当渲染树中，当元素尺寸、结构、属性发生变化时，浏览器需要重新渲染部分或者全部文档的过程，就叫做回流

一些会造成回流的操作：

1. 页面的首次渲染
2. 浏览器的窗口大小变化
3. 元素内容、字体发生变化
4. 元素尺寸、位置发生变化
5. 添加或者删除元素
6. 激活CSS伪类
7. 查询某些属性或者调用方法，例如 offset style

在触发回流的时候，由于浏览器渲染是基于流式布局的，当触发回流时，会造成周围的 DOM 元素发生重新排列

2. 重绘

当页面中某些元素的样式，但是不会影响其在文档流的位置时候，浏览器会对元素进行重新绘制，就叫做重绘

一些会造成重绘的操作：

1. color、background
2. outline： outline-color、outline-width
3. border-radius、visibility、box-shadow

💥💥💥注意

当触发回流时，一定会触发重绘，但是重绘不一定回流

3. 如何避免回流和重绘呢？

1. 操作DOM时，尽量在低层级的 DOM 节点进行操作
2. 对于经常操作的DOM，使用absolute或者fixed，脱离文档流
3. 避免重复操作 DOM ，可以创建一个文档片段DocumentFragment，在它上面应用所用的DOM操作，然后再把它添加到文档中
4. 先把元素设置为display：none操作结束后再把它显示出来，这样多次重流，只会发生一次

4. 引申出来的问题

如何优化动画？

使用 absolute 或者 fixed 脱离文档流

documentFragment 是什么？

DocumentFragment，文档片段节点，一个没有父对象的最小文档对象，文档片段不会在页面中显示，但是可以用来存储或者操作节点，从而提高DOM操作的性能，

这篇关于面试官：说说回流和重绘吧的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---