讲讲回流和重绘的区别，如何避免回流和重绘？

回流:当元素的尺寸,结构属性改变,浏览器需要重新渲染部分或全部文档流的过程

• 浏览器首次加载
• 元素尺寸位置改变
• 元素内容改变
• 字体大小改变
• 添加删除dom元素

重绘:元素样式改变并不会影响其位置的变化,浏览器将新样式赋予它并重新绘制

• color
• background-color

区别:

回流一定重绘,重绘不一定回流(如改变颜色)

如何避免:

• 避免多层内联样式
• 如果有动画效果,使其脱离文档流
• 用js操作样式的时候尽量一次操作完或者将样式定义为一个class
• 可以先将元素设置为display:none;等操作结束在显示出来