重绘和回流

重绘和回流:

回流：页面元素的几何属性发生了变化，或者是页面数据有新增/删除这样的操作了，就会触发回流。因为页面需要重新渲染生成dom树了，这个过程就是回流。

发生回流，就一定会让页面重绘。

重绘：就是页面重新渲染绘制。

什么情况下会发生重绘和回流？

1. 页面初始渲染一定会发生重绘

2. 改变字体大小，改变元素尺寸或者属性或者样式等，这个时间就会产生回流。

3. 改变元素内容，添加/删除可见dom元素

4.调整窗口大小的时候，页面如果是响应式的，也会产生重绘

如何减少重绘和回流？

Css:

避免设置多层内联样式.

动画效果或者动态交互样式，可以多应用在脱离文档流的浮动元素上或者不占用文档流的标签上，这样元素样式或者属性发生改变时，可以避免文档流发生变动，从而避免一些dom操作。

Js :

避免频繁操作dom.

避免使用js改完一个样式接着改下一个样式，最好一次性修改css样式。

在display:none上的dom操作不会引发回流和重绘。