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

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操作的性能，