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