---

什么是回流？

当一个元素自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，就产生了回流

什么是重绘？

当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘

注意：回流一定会触发重绘，而重绘不一定会回流

什么时候会进行回流？

1. 添加或者删除可见的DOM元素的时候

2. 元素的位置发生改变

3. 元素的尺寸发生改变

4. 内容改变

5. 页面第一次渲染的时候

列举一些相关的CSS样式：width、height、line-height、padding、margin、diaplay、border、top、position、float、font-size、overflow等

什么时候会进行重绘？

列举一些相关的CSS样式：color、background、background-size、visibility、box-shadow

如何进行性能优化？

1. 用transform 代替 top，left ，margin-top， margin-left… 这些位移属性

2. 不要使用 js 代码对dom 元素设置多条样式，选择用一个 className 代替之

3. 不要在循环内获取dom 的样式例如：offsetWidth, offsetHeight, clientWidth, clientHeight等。浏览器有一个回流的缓冲机制，获取这些属性时会产生回流

4. 避免设置多层内联样式，写个外部类这样只回流一次

5. 让多次回流的元素脱离文档流比如动画，使用 position 属性的 fixed 值或 absolute 值

6. 一起变化（同时修改所有需要变化的属性）

如何避免

CSS

避免使用table布局。
尽可能在DOM树的最末端改变class。
避免设置多层内联样式。
将动画效果应用到position属性为absolute或fixed的元素上。
避免使用CSS表达式（例如：calc()）。

JavaScript

避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

参考链接

掘金
知乎