回流(reflow)與重繪(repaint)

很早之前就聽說(shuō)過(guò)回流與重繪這兩個(gè)名詞，但是并不理解它們的含義，也沒(méi)有深究過(guò)，今天看了一套網(wǎng)易的題目，涉及到了這兩個(gè)概念，于是想要把它們倆弄清楚。。。

一、概念

首先我們要明白的是，頁(yè)面的顯示過(guò)程分為以下幾個(gè)階段：

1、生成DOM樹(包括display:none的節(jié)點(diǎn))

2、在DOM樹的基礎(chǔ)上根據(jù)節(jié)點(diǎn)的集合屬性(margin,padding,width,height等)生成render樹(不包括display:none，head節(jié)點(diǎn)，但是包括visibility:hidden的節(jié)點(diǎn))

3、在render樹的基礎(chǔ)上繼續(xù)渲染顏色背景色等樣式

reflow:當(dāng)render樹的一部分或者全部因?yàn)榇笮∵吘嗟葐?wèn)題發(fā)生改變而需要重建的過(guò)程，叫做回流

repaint:當(dāng)諸如顏色背景等不會(huì)引起頁(yè)面布局變化，而只需要重新渲染的過(guò)程叫做重繪

通過(guò)上述定義，可以很明顯看出，重繪的代價(jià)要比回流小，畢竟重繪只涉及樣式的改變，不涉及到布局。重繪就好像給人染了一個(gè)頭發(fā)，而回流相當(dāng)于給人做了一次抽脂手術(shù)

二、什么會(huì)引起回流

這也是網(wǎng)易題目的出法

頁(yè)面渲染初始化

DOM結(jié)構(gòu)變化，比如刪除了某個(gè)節(jié)點(diǎn)；骨頭都被打斷了，肯定比抽脂更嚴(yán)重，所以會(huì)引發(fā)回流

render樹變化，比如減少了padding；也就是進(jìn)行抽脂手術(shù)

窗口resize事件觸發(fā)

最復(fù)雜的一種：獲取某些屬性，引發(fā)回流?很多瀏覽器會(huì)對(duì)回流做優(yōu)化，他會(huì)等到足夠數(shù)量的變化發(fā)生，在做一次批處理回流。?但是除了render樹的直接變化。?當(dāng)獲取一些屬性時(shí)，瀏覽器為了獲得正確的值也會(huì)觸發(fā)回流。這樣就使得瀏覽器的優(yōu)化失效了

這些屬性包括

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

width,height

調(diào)用了getComputedStyle(), 或者 IE的 currentStyle

我在別處抄來(lái)了一段代碼，嘻嘻

1 2 3 4 5 6 7 8

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!'));

可以看出，回流一定伴隨著重繪，而重繪卻可以單獨(dú)出現(xiàn)

可以理解為，路人甲摔斷了腿或者抽脂之后，病怏怏導(dǎo)致頭發(fā)也變白了(回流+重繪)；但是炮灰乙卻僅僅是去村口王師傅那里燙了頭(重繪)

回流對(duì)性能產(chǎn)生了一定的影響，盡管瀏覽器機(jī)智地幫我們進(jìn)行了批處理，但是仍然存在著上述諸多闊怕的屬性，一獲取就回流。怎么解決？

三、減少回流

避免逐項(xiàng)更改樣式。最好一次性更改style屬性，或者將樣式列表定義為class并一次性更改class屬性。

避免循環(huán)操作DOM。創(chuàng)建一個(gè)documentFragment或div，在它上面應(yīng)用所有DOM操作，最后再把它添加到window.document。

避免多次讀取offsetLeft等屬性。無(wú)法避免則將它們緩存到變量。

將復(fù)雜的元素絕對(duì)定位或固定定位，使它脫離文檔流。否則回流代價(jià)十分高

補(bǔ)充：改變字體大小會(huì)引發(fā)回流

回到網(wǎng)易的問(wèn)題，并適當(dāng)做延伸：display:none和visibility：hidden會(huì)產(chǎn)生回流與重繪嗎？

display：none指的是元素完全不陳列出來(lái)，不占據(jù)空間，涉及到了DOM結(jié)構(gòu)，故產(chǎn)生reflow與repaint

visibility：hidden指的是元素不可見(jiàn)但存在，保留空間，不影響結(jié)構(gòu)，故只產(chǎn)生repaint

原文鏈接點(diǎn)擊打開鏈接

總結(jié)

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

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