回流和重绘有什么区别？如何避免回流和重绘

写在前面：回流必将引起重绘，但是重绘不一定会引起回流

回流

当元素的尺寸、结构等属性改变时，浏览器重新渲染部分或者全部文档的过程称为回流

• 首次加载页面
• 浏览器窗口大小改变
• 元素尺寸或者位置改变
• 元素内容改变
• 字体大小改变
• 添加或者删除dom元素
• 伪类触发:hover

重绘

当页面中元素的样式改变并不影响它在文档中的位置，浏览器会将新样式赋予元素并重新绘制他，这个叫重绘

• color
• bachground-color
• visibility
• …

注意：回流要比重绘更耗费性能，我们在做开发的时候尽量减少回流

区别

• 回流必将引起重绘，而重绘不一定会引起回流（只有颜色改变的时候就只会发生重绘而不会引起回流）。
• 当页面布局和几何属性改变时就需要回流（添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变）。

如何避免

• 避免使用table布局
• 不要使用css计算calc
• 动画效果放在position为absolute或者fixed的元素上
• 尽可能在dom树的最末端改变样式
• 用js操作样式的时候尽量一次操作完或者将样式定义为一个class
• 尽量避免过多的操作dom元素的新增和删除