一、重繪

指得是元素外觀發生變化，不影響整體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不會真正進行重排重繪等操作，我們在程式碼書寫中一定要減少這些影響效能的操作；