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