重绘和回流（重排）?

一、重绘

    指得是元素外观发生变化，不影响整体html布局，重新把元素绘制的过程

    常见的重绘操作：

    1.改变元素的颜色相关属性；

    2.visiblity,outline等等。。。

二、回流

    指的是元素的位置，大小等变化，变影响了整体html布局，重新排列的过程，也就重排

    常见的操作有：

    1.dom的增删操作；

    2.元素的位置改变，大小改变，margin，padding，border等；

    3.元素的字号font-size等属性改变；

    4.浏览器窗口的改变会触发resize事件；

    5.激活css伪类，:hover属性等等;

    6.查询一些属性也会导致，

• offsetTop、offsetLeft、 offsetWidth、offsetHeight、
• scrollTop、scrollLeft、scrollWidth、scrollHeight、
• clientTop、clientLeft、clientWidth、clientHeight；
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

建议：

重排的代价比较高，如果浏览器性能不好可能会导致用户体验极差，重绘不一定会导致性能，这就是应用第三方框架react，vue为什么会提升系统的性能，

因为框架渲染的是虚拟的dom，但是虚拟的dom不会真正进行重排重绘等操作，我们在代码书写中一定要减少这些影响性能的操作；