JavaScript中的Repaint和Reflow用法詳解
你是不是經(jīng)常聽師兄或一些前端前輩說不能用CSS通配符 *,CSS選擇器層疊不能超過三層,CSS盡量使用類選擇器,書寫HTML少使用table,結(jié)構(gòu)要盡量簡單-DOM樹要小....等這些忠告,以前我就大概知道使用通配符或者CSS選擇器層次過多可能會降低性能,至于為什么不使用table標(biāo)簽我一直是迷迷糊糊,也就跟著那樣做了,但我認識了Repain和 Reflow之后,原來這些還真不能用太多。 ok,希望這篇文章對你有幫助!
1.什么是Repaint/Reflow?
好,先上一張圖:瀏覽器解析大概的工作流程
這張圖應(yīng)該可以很好理解,歸納為四個步驟:
1、解析HTML以構(gòu)建DOM樹:渲染引擎開始解析HTML文檔,轉(zhuǎn)換樹中的html標(biāo)簽或js生成的標(biāo)簽到DOM節(jié)點,它被稱為 -- 內(nèi)容樹。
2、構(gòu)建渲染樹:解析CSS(包括外部CSS文件和樣式元素以及js生成的樣式),根據(jù)CSS選擇器計算出節(jié)點的樣式,創(chuàng)建另一個樹 —- 渲染樹。
3、布局渲染樹: 從根節(jié)點遞歸調(diào)用,計算每一個元素的大小、位置等,給每個節(jié)點所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)。
4、繪制渲染樹: 遍歷渲染樹,每個節(jié)點將使用UI后端層來繪制。
好,我們可以看到Repain 和 Reflow 分別出現(xiàn)在了第三和第四步。因此我們給出下面的定義:
對于DOM結(jié)構(gòu)中的各個元素都有自己的盒子(模型),這些都需要瀏覽器根據(jù)各種樣式(瀏覽器的、開發(fā)人員定義的等)來計算并根據(jù)計算結(jié)果將元素放到它該出現(xiàn)的位置,這個過程稱之為reflow;當(dāng)各種盒子的位置、大小以及其他屬性,例如顏色、字體大小等都確定下來后,瀏覽器于是便把這些元素都按照各自的特性繪制了一遍,于是頁面的內(nèi)容出現(xiàn)了,這個過程稱之為repaint。
可見這兩個東東對瀏覽器渲染頁面是很重要的啊,都是會影響性能的,因此我們需要了解一些常見的會引起repaint和reflow的一些操作,并且應(yīng)該盡量減少以提高渲染速度。
2.引起Repain和Reflow的一些操作
Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每個結(jié)點都會有 reflow 方法,一個結(jié)點的 reflow 很有可能導(dǎo)致子結(jié)點,甚至父點以及同級結(jié)點的 reflow。在一些高性能的電腦上也許還沒什么,但是如果 reflow 發(fā)生在手機上,那么這個過程是非常痛苦和耗電的。
所以,下面這些動作有很大可能會是成本比較高的。
- 當(dāng)你增加、刪除、修改 DOM 結(jié)點時,會導(dǎo)致 Reflow 或 Repaint。
- 當(dāng)你移動 DOM 的位置,或是搞個動畫的時候。
- 當(dāng)你修改 CSS 樣式的時候。
- 當(dāng)你 Resize 窗口的時候(移動端沒有這個問題),或是滾動的時候。
- 當(dāng)你修改網(wǎng)頁的默認字體時。
注:display:none 會觸發(fā) reflow,而 visibility:hidden 只會觸發(fā) repaint,因為沒有發(fā)現(xiàn)位置變化。
3.如何優(yōu)化?
Reflow是不可避免的,只能將Reflow對性能的影響減到最小,給出下面幾條建議:
不要一條一條地修改 DOM 的樣式。與其這樣,還不如預(yù)先定義好 css 的 class,然后修改 DOM 的 className:
// 不好的寫法 var left = 10, top = 10; el.style.left = left + "px"; el.style.top = top + "px"; // 推薦寫法 el.className += " theclassname";
把 DOM 離線后修改。如:
a> 使用 documentFragment 對象在內(nèi)存里操作 DOM。
b> 先把 DOM 給 display:none (有一次 repaint),然后你想怎么改就怎么改。比如修改 100 次,然后再把他顯示出來。
c> clone 一個 DOM 節(jié)點到內(nèi)存里,然后想怎么改就怎么改,改完后,和在線的那個的交換一下。
不要把 DOM 節(jié)點的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量。不然這會導(dǎo)致大量地讀寫這個結(jié)點的屬性。
盡可能的修改層級比較低的 DOM節(jié)點。當(dāng)然,改變層級比較底的 DOM節(jié)點有可能會造成大面積的 reflow,但是也可能影響范圍很小。
為動畫的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他們的 CSS 是會大大減小 reflow 。
千萬不要使用 table 布局。因為可能很小的一個小改動會造成整個 table 的重新布局。
認識了這些是不是對瀏覽器的原理有更大興趣了?OK,后面會更新關(guān)于瀏覽器原理的文章,或者你們可以先去搜搜別人的,因為我覺得理解瀏覽器的原理確實是很重要,可以幫助我們寫出性能更好的website。
相關(guān)文章
JavaScript 學(xué)習(xí)筆記(十六) js事件
事件對象里包含三個方面的信息····回看上一篇內(nèi)容!事件對象里的屬性和方法,主要是鼠標(biāo)和鍵盤的信息。2010-02-02JavaScript基礎(chǔ)知識之?dāng)?shù)據(jù)類型
JavaScript中有5種簡單數(shù)據(jù)類型(也稱為基本數(shù)據(jù)類型):Undefined、Null、Boolean、Number和String。還有1種復(fù)雜數(shù)據(jù)類型——Object,Object本質(zhì)上是由一組無序的名值對組成的2012-08-08javascript日期處理函數(shù),性能優(yōu)化批處理
這篇文章主要介紹了javascript日期處置函數(shù),對批處理做了性能優(yōu)化,需要的朋友可以參考下2015-09-09