回流:当元素的尺寸,结构属性改变,浏览器需要重新渲染部分或全部文档流的过程
- 浏览器首次加载
- 元素尺寸位置改变
- 元素内容改变
- 字体大小改变
- 添加删除dom元素
重绘:元素样式改变并不会影响其位置的变化,浏览器将新样式赋予它并重新绘制
- color
- background-color
区别:
回流一定重绘,重绘不一定回流(如改变颜色)
如何避免:
- 避免多层内联样式
- 如果有动画效果,使其脱离文档流
- 用js操作样式的时候尽量一次操作完或者将样式定义为一个class
- 可以先将元素设置为display:none;等操作结束在显示出来