1. 回流
當渲染樹中部分或者全部元素的尺寸、結構或者屬性發生變化時,瀏覽器會重新渲染部分或者全部文檔的過程就稱為回流。
下面這些操作會導致回流:
頁面的首次渲染瀏覽器的窗口大小發生變化元素的內容發生變化元素的尺寸或者位置發生變化元素的字體大小發生變化激活CSS偽類查詢某些屬性或者調用某些方法添加或者刪除可見的DOM元素
在觸發回流(重排)的時候,由于瀏覽器渲染頁面是基于流式布局的,所以當觸發回流時,會導致周圍的DOM元素重新排列,它的影響范圍有兩種:
① 全局范圍:從根節點開始,對整個渲染樹進行重新布局② 局部范圍:對渲染樹的某部分或者一個渲染對象進行重新布局
2. 重繪
當頁面中某些元素的樣式發生變化,但是不會影響其在文檔流中的位置時,瀏覽器就會對元素進行重新繪制,這個過程就是重繪。
下面這些操作會導致回流:
color、background 相關屬性:background-color、background-image 等outline 相關屬性:outline-color、outline-width 、text-decorationborder-radius、visibility、box-shadow
注意: 當觸發回流時,一定會觸發重繪,但是重繪不一定會引發回流。