快捷導(dǎo)航

JavaScript中的Repaint和Reflow用法詳解

更新時(shí)間：2015年07月27日 18:06:59 投稿：goldensun

這篇文章主要介紹了JavaScript中的Repaint和Reflow用法詳解,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下

你是不是經(jīng)常聽(tīng)?zhēng)熜只蛞恍┣岸饲拜呎f(shuō)不能用CSS通配符 *，CSS選擇器層疊不能超過(guò)三層，CSS盡量使用類(lèi)選擇器，書(shū)寫(xiě)HTML少使用table，結(jié)構(gòu)要盡量簡(jiǎn)單-DOM樹(shù)要小....等這些忠告，以前我就大概知道使用通配符或者CSS選擇器層次過(guò)多可能會(huì)降低性能，至于為什么不使用table標(biāo)簽我一直是迷迷糊糊，也就跟著那樣做了，但我認(rèn)識(shí)了Repain和 Reflow之后，原來(lái)這些還真不能用太多。 ok,希望這篇文章對(duì)你有幫助！

1.什么是Repaint/Reflow?

好，先上一張圖：瀏覽器解析大概的工作流程

2015727180703820.png (600×196)

這張圖應(yīng)該可以很好理解，歸納為四個(gè)步驟：

1、解析HTML以構(gòu)建DOM樹(shù)：渲染引擎開(kāi)始解析HTML文檔，轉(zhuǎn)換樹(shù)中的html標(biāo)簽或js生成的標(biāo)簽到DOM節(jié)點(diǎn)，它被稱(chēng)為 -- 內(nèi)容樹(shù)。
2、構(gòu)建渲染樹(shù)：解析CSS（包括外部CSS文件和樣式元素以及js生成的樣式），根據(jù)CSS選擇器計(jì)算出節(jié)點(diǎn)的樣式，創(chuàng)建另一個(gè)樹(shù) —- 渲染樹(shù)。
3、布局渲染樹(shù): 從根節(jié)點(diǎn)遞歸調(diào)用，計(jì)算每一個(gè)元素的大小、位置等，給每個(gè)節(jié)點(diǎn)所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)。
4、繪制渲染樹(shù): 遍歷渲染樹(shù)，每個(gè)節(jié)點(diǎn)將使用UI后端層來(lái)繪制。

好，我們可以看到Repain 和 Reflow 分別出現(xiàn)在了第三和第四步。因此我們給出下面的定義：

對(duì)于DOM結(jié)構(gòu)中的各個(gè)元素都有自己的盒子（模型），這些都需要瀏覽器根據(jù)各種樣式（瀏覽器的、開(kāi)發(fā)人員定義的等）來(lái)計(jì)算并根據(jù)計(jì)算結(jié)果將元素放到它該出現(xiàn)的位置，這個(gè)過(guò)程稱(chēng)之為reflow；當(dāng)各種盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來(lái)后，瀏覽器于是便把這些元素都按照各自的特性繪制了一遍，于是頁(yè)面的內(nèi)容出現(xiàn)了，這個(gè)過(guò)程稱(chēng)之為repaint。
可見(jiàn)這兩個(gè)東東對(duì)瀏覽器渲染頁(yè)面是很重要的啊，都是會(huì)影響性能的，因此我們需要了解一些常見(jiàn)的會(huì)引起repaint和reflow的一些操作，并且應(yīng)該盡量減少以提高渲染速度。

2.引起Repain和Reflow的一些操作

Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每個(gè)結(jié)點(diǎn)都會(huì)有 reflow 方法，一個(gè)結(jié)點(diǎn)的 reflow 很有可能導(dǎo)致子結(jié)點(diǎn)，甚至父點(diǎn)以及同級(jí)結(jié)點(diǎn)的 reflow。在一些高性能的電腦上也許還沒(méi)什么，但是如果 reflow 發(fā)生在手機(jī)上，那么這個(gè)過(guò)程是非常痛苦和耗電的。
所以，下面這些動(dòng)作有很大可能會(huì)是成本比較高的。

當(dāng)你增加、刪除、修改 DOM 結(jié)點(diǎn)時(shí)，會(huì)導(dǎo)致 Reflow 或 Repaint。
當(dāng)你移動(dòng) DOM 的位置，或是搞個(gè)動(dòng)畫(huà)的時(shí)候。
當(dāng)你修改 CSS 樣式的時(shí)候。
當(dāng)你 Resize 窗口的時(shí)候（移動(dòng)端沒(méi)有這個(gè)問(wèn)題），或是滾動(dòng)的時(shí)候。
當(dāng)你修改網(wǎng)頁(yè)的默認(rèn)字體時(shí)。

注：display:none 會(huì)觸發(fā) reflow，而 visibility:hidden 只會(huì)觸發(fā) repaint，因?yàn)闆](méi)有發(fā)現(xiàn)位置變化。
3.如何優(yōu)化？

Reflow是不可避免的，只能將Reflow對(duì)性能的影響減到最小,給出下面幾條建議：

不要一條一條地修改 DOM 的樣式。與其這樣，還不如預(yù)先定義好 css 的 class，然后修改 DOM 的 className：

 // 不好的寫(xiě)法
  var left = 10,
  top = 10;
  el.style.left = left + "px";
  el.style.top = top + "px";
  // 推薦寫(xiě)法
  el.className += " theclassname";

    把 DOM 離線后修改。如：
    a> 使用 documentFragment 對(duì)象在內(nèi)存里操作 DOM。
    b> 先把 DOM 給 display:none (有一次 repaint)，然后你想怎么改就怎么改。比如修改 100 次，然后再把他顯示出來(lái)。
    c> clone 一個(gè) DOM 節(jié)點(diǎn)到內(nèi)存里，然后想怎么改就怎么改，改完后，和在線的那個(gè)的交換一下。

不要把 DOM 節(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里當(dāng)成循環(huán)里的變量。不然這會(huì)導(dǎo)致大量地讀寫(xiě)這個(gè)結(jié)點(diǎn)的屬性。

盡可能的修改層級(jí)比較低的 DOM節(jié)點(diǎn)。當(dāng)然，改變層級(jí)比較底的 DOM節(jié)點(diǎn)有可能會(huì)造成大面積的 reflow，但是也可能影響范圍很小。

為動(dòng)畫(huà)的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他們的 CSS 是會(huì)大大減小 reflow 。

千萬(wàn)不要使用 table 布局。因?yàn)榭赡芎苄〉囊粋€(gè)小改動(dòng)會(huì)造成整個(gè) table 的重新布局。

認(rèn)識(shí)了這些是不是對(duì)瀏覽器的原理有更大興趣了？OK,后面會(huì)更新關(guān)于瀏覽器原理的文章，或者你們可以先去搜搜別人的，因?yàn)槲矣X(jué)得理解瀏覽器的原理確實(shí)是很重要，可以幫助我們寫(xiě)出性能更好的website。

您可能感興趣的文章: