repaint與reflow的意思

我們一起來(lái)學(xué)習(xí)一下頁(yè)面重構(gòu)應(yīng)注意的repaint和reflow，首先了解一下什么是repaint和reflow。

1. 什么是 repaint 和 reflow？

一個(gè)頁(yè)面由兩部分組成： DOM：描述該頁(yè)面的結(jié)構(gòu) render：描述 DOM 節(jié)點(diǎn) (nodes) 在頁(yè)面上如何呈現(xiàn)

當(dāng) DOM 元素的屬性發(fā)生變化 (如 color) 時(shí), 瀏覽器會(huì)通知 render 重新描繪相應(yīng)的元素, 此過(guò)程稱(chēng)為 repaint。

如果該次變化涉及元素布局 (如 width), 瀏覽器則拋棄原有屬性, 重新計(jì)算并把結(jié)果傳遞給 render 以重新描繪頁(yè)面元素, 此過(guò)程稱(chēng)為 reflow。

這兩個(gè)過(guò)程是很耗費(fèi)瀏覽器性能的, 從 IE 系列和 Chrome 渲染頁(yè)面速度上的差距即可看出渲染引擎計(jì)算對(duì)應(yīng)值和呈現(xiàn)并不一定高效, 而每次對(duì)元素的操作都會(huì)發(fā)生 repaints 或 reflow, 因此編寫(xiě) DOM 交互時(shí)如果不注意就會(huì)導(dǎo)致頁(yè)面性能低下. 頁(yè)面渲染的過(guò)程如下：

1.解析HTML代碼并生成一個(gè) DOM 樹(shù)。

2.解析CSS文件，順序?yàn)椋簽g覽器默認(rèn)樣式->自定義樣式->頁(yè)面內(nèi)的樣式。

3.生成一個(gè)渲染樹(shù)（render tree）。這個(gè)渲染樹(shù)和DOM樹(shù)的不同之處在于，它是受樣式影響的。它不包括那些不可見(jiàn)的節(jié)點(diǎn)。

4.當(dāng)渲染樹(shù)生成之后，瀏覽器就會(huì)在屏幕上“畫(huà)”出所有渲染樹(shù)中的節(jié)點(diǎn)。

2. 什么情況下會(huì)觸發(fā)瀏覽器的repaint/reflow?

除了頁(yè)面在首次加載時(shí)必然要經(jīng)歷該過(guò)程之外，還有以下行為會(huì)觸發(fā)這個(gè)行為： 引用: 1. DOM元素的添加、修改（內(nèi)容）、刪除( Reflow + Repaint) 2. 僅修改DOM元素的字體顏色（只有Repaint，因?yàn)椴恍枰{(diào)整布局） 3. 應(yīng)用新的樣式或者修改任何影響元素外觀的屬性 4. Resize瀏覽器窗口、滾動(dòng)頁(yè)面 5. 讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 3. 怎么優(yōu)化？

1. 避免在document上直接進(jìn)行頻繁的DOM操作，如果確實(shí)需要可以采用off-document的方式進(jìn)行，具體的方法包括但不完全包括以下幾種：

引用: 1. 先將元素從document中刪除，完成修改后再把元素放回原來(lái)的位置 2. 將元素的display設(shè)置為”none”，完成修改后再把display修改為原來(lái)的值 3. 如果需要?jiǎng)?chuàng)建多個(gè)DOM節(jié)點(diǎn)，可以使用DocumentFragment創(chuàng)建完后一次性的加入document 2. 集中修改樣式

引用: 1. 盡可能少的修改元素style上的屬性 2. 盡量通過(guò)修改className來(lái)修改樣式 3. 通過(guò)cssText屬性來(lái)設(shè)置樣式值 3. 緩存Layout屬性值

引用: 對(duì)于Layout屬性中非引用類(lèi)型的值（數(shù)字型），如果需要多次訪問(wèn)則可以在一次訪問(wèn)時(shí)先存儲(chǔ)到局部變量中，之后都使用局部變量，這樣可以避免每次讀取屬性時(shí)造成瀏覽器的渲染。 4. 設(shè)置元素的position為absolute或fixed

引用: 在元素的position為static和relative時(shí)，元素處于DOM樹(shù)結(jié)構(gòu)當(dāng)中，當(dāng)對(duì)元素的某個(gè)操作需要重新渲染時(shí)，瀏覽器會(huì)渲染整個(gè)頁(yè) 面。將元素的position設(shè)置為absolute和fixed可以使元素從DOM樹(shù)結(jié)構(gòu)中脫離出來(lái)獨(dú)立的存在，而瀏覽器在需要渲染時(shí)只需要渲染該元素 以及位于該元素下方的元素，從而在某種程度上縮短瀏覽器渲染時(shí)間，這在當(dāng)今越來(lái)越多的Javascript動(dòng)畫(huà)方面尤其值得考慮。 5. 權(quán)衡速度的平滑

引用: 比如實(shí)現(xiàn)一個(gè)動(dòng)畫(huà)，以1個(gè)像素為單位移動(dòng)這樣最平滑，但reflow就會(huì)過(guò)于頻繁，CPU很快就會(huì)被完全占用。如果以3個(gè)像素為單位移動(dòng)就會(huì)好很多。 6. 不要用tables布局

引用: 不要用tables布局的另一個(gè)原因就是tables中某個(gè)元素一旦觸發(fā)reflow就會(huì)導(dǎo)致table里所有的其它元素 reflow。在適合用table的場(chǎng)合，可以設(shè)置table-layout為auto或fixed，這樣可以讓table一行一行的渲染，這種做法也是為了限制reflow的影響范圍 7. 不要在css里面寫(xiě)expression

引用: 很多情況下都會(huì)觸發(fā)reflow，如果css里有expression，每次都會(huì)重新計(jì)算一遍

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁(yè)名稱(chēng)：repaint與reflow的意思
分享鏈接：http://www.muchs.cn/news1/320451.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、用戶體驗(yàn)、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)