重流（Reflow）是指布局引擎為frame計(jì)算圖形的過(guò)程。 frame是一個(gè)矩形，擁有寬高和相對(duì)父容器的偏移。frame用來(lái)顯示盒模型（content model）， 但一個(gè)content model可能會(huì)顯示為多個(gè)frame，比如換行的文本每行都會(huì)顯示為一個(gè)frame。

　　重繪（Repaint）發(fā)生在元素的可見性發(fā)生變化時(shí)，比如背景色、前景色等。 因此回流必然會(huì)引起重繪。

　　

重流的原因：

初始化（Initial）。DOM載入后的第一次回流，將會(huì)遍歷所有frame。
漸進(jìn)（Incremental）。當(dāng)一個(gè)frame發(fā)生漸進(jìn)回流時(shí)，意味著它前面的元素都沒(méi)有變， 而是它里面的元素變了。這會(huì)引起自底向上的作用。
改變大小（Resize）。元素的容器邊界發(fā)生變化時(shí)，此時(shí)元素內(nèi)部狀態(tài)沒(méi)變。 在計(jì)算自頂向下的布局約束的同時(shí)，可以復(fù)用內(nèi)部狀態(tài)。
樣式改變（StyleChange）。整個(gè)frame樹都應(yīng)得到遍歷。
Dirty。當(dāng)一個(gè)容器已經(jīng)緩存了多個(gè)子元素的Incremental回流時(shí)，該容器出于Dirty的狀態(tài)。

如果你是Web開發(fā)者，可能更關(guān)注的是哪些具體原因會(huì)引起瀏覽器的回流，下面羅列一下:

調(diào)整窗口大小
改變字體大小
樣式表變動(dòng)
元素內(nèi)容變化，尤其是輸入控件
CSS偽類激活
DOM操作
offsetWidth, width, clientWidth, scrollTop/scrollHeight的計(jì)算， 會(huì)使瀏覽器將漸進(jìn)回流隊(duì)列Flush，立即執(zhí)行回流。

最佳實(shí)踐

對(duì)我們Web開發(fā)者最有用的還是如何去做，才能減少頁(yè)面回流。先來(lái)個(gè)例子：

var s = document.body.style; 

s.padding = "2px"; // 回流+重繪
s.border = "1px solid red"; // 再一次 回流+重繪

s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪

s.fontSize = "14px"; // 再一次 回流+重繪

// 添加node，再一次 回流+重繪
document.body.appendChild(document.createTextNode('abc!'));

可以看到每次DOM元素的樣式操作都會(huì)引發(fā)重繪，如果涉及布局還會(huì)引發(fā)回流。

避免大量頁(yè)面回流的手段也有很多，其本質(zhì)都是盡量減少引起回流和重繪的DOM操作：

避免逐項(xiàng)更改樣式。最好一次性更改style屬性，或者將樣式列表定義為class并一次性更改class屬性。
避免循環(huán)操作DOM。創(chuàng)建一個(gè)documentFragment或div，在它上面應(yīng)用所有DOM操作，最后再把它添加到window.document。
避免循環(huán)讀取offsetLeft等屬性。在循環(huán)之前把它們存起來(lái)。
絕對(duì)定位具有復(fù)雜動(dòng)畫的元素。絕對(duì)定位使它脫離文檔劉，否則會(huì)引起父元素及后續(xù)元素大量的回流。

總結(jié)

以上是生活随笔為你收集整理的HTML页面的重绘（repaint）和重流（reflow）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。