前端基本功(四):性能優(yōu)化之你真的懂回流缴淋、重繪與合成層嗎准给?

1. 頁面的呈現(xiàn)流程

  1. 瀏覽器把獲取到的HTML代碼解析成1個(gè)DOM樹,HTML中的每個(gè)tag都是DOM樹中的1個(gè)節(jié)點(diǎn)重抖,根節(jié)點(diǎn)就是我們常用的document對(duì)象圆存。DOM樹里包含了所有HTML標(biāo)簽,包括display:none隱藏仇哆,還有用JS動(dòng)態(tài)添加的元素等沦辙。
  2. 瀏覽器把所有樣式(用戶定義的CSS和用戶代理)解析成樣式結(jié)構(gòu)體,在解析的過程中會(huì)去掉瀏覽器不能識(shí)別的樣式讹剔,比如IE會(huì)去掉-moz開頭的樣式油讯,而FF會(huì)去掉_開頭的樣式。
  3. DOM Tree 和樣式結(jié)構(gòu)體組合后構(gòu)建render tree, render tree類似于DOM tree延欠,但區(qū)別很大陌兑,render tree能識(shí)別樣式,render tree中每個(gè)NODE都有自己的style由捎,而且 render tree不包含隱藏的節(jié)點(diǎn) (比如display:none的節(jié)點(diǎn)兔综,還有head節(jié)點(diǎn)),因?yàn)檫@些節(jié)點(diǎn)不會(huì)用于呈現(xiàn)狞玛,而且不會(huì)影響呈現(xiàn)的软驰,所以就不會(huì)包含到 render tree中。注意 visibility:hidden隱藏的元素還是會(huì)包含到 render tree中的心肪,因?yàn)関isibility:hidden 會(huì)影響布局(layout)锭亏,會(huì)占有空間。根據(jù)CSS2的標(biāo)準(zhǔn)硬鞍,render tree中的每個(gè)節(jié)點(diǎn)都稱為Box (Box dimensions)慧瘤,理解頁面元素為一個(gè)具有填充、邊距固该、邊框和位置的盒子锅减。
  4. 一旦render tree構(gòu)建完畢后,瀏覽器就可以根據(jù)render tree來繪制頁面了伐坏。

2. 什么是回流與重繪

  1. 當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸怔匣,布局,隱藏等改變而需要重新構(gòu)建著淆。這就稱為回流(reflow)劫狠。每個(gè)頁面至少需要一次回流拴疤,就是在頁面第一次加載的時(shí)候永部。在回流的時(shí)候独泞,瀏覽器會(huì)使渲染樹中受到影響的部分失效,并重新構(gòu)造這部分渲染樹苔埋,完成回流后懦砂,瀏覽器會(huì)重新繪制受影響的部分到屏幕中,該過程成為重繪组橄。
  2. 當(dāng)render tree中的一些元素需要更新屬性荞膘,而這些屬性只是影響元素的外觀,風(fēng)格玉工,而不會(huì)影響布局的羽资,比如background-color。則就叫稱為重繪遵班。
  3. 回流必將引起重繪屠升,而重繪不一定會(huì)引起回流。

repaint狭郑,就是瀏覽器得知元素產(chǎn)生了不影響排版的情況下后對(duì)這個(gè)元素進(jìn)行重新繪制的過程腹暖。例如我們改變了元素的顏色,加個(gè)下劃線等翰萨。

reflow, 瀏覽器得知元素產(chǎn)生了對(duì)文檔樹排版有影響的樣式變化脏答,對(duì)所有受影響的dom節(jié)點(diǎn)進(jìn)行重新排版工作

3. 回流發(fā)生場(chǎng)景

當(dāng)頁面布局和幾何屬性改變時(shí)就需要回流。

  1. 添加或者刪除可見的DOM元素亩鬼;
  2. 元素位置改變殖告;
  3. 元素尺寸改變——邊距、填充雳锋、邊框丛肮、寬度和高度
  4. 內(nèi)容改變——比如文本改變或者圖片大小改變而引起的計(jì)算值寬度和高度改變;
  5. 頁面渲染初始化魄缚;
  6. 瀏覽器窗口尺寸改變——resize事件發(fā)生時(shí)宝与;
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!'));

4.回流與重繪的影響

回流比重繪的代價(jià)要更高冶匹,回流的花銷跟render tree有多少節(jié)點(diǎn)需要重新構(gòu)建有關(guān)系习劫,假設(shè)你直接操作body嚼隘,比如在body最前面插入1個(gè)元素,會(huì)導(dǎo)致整個(gè)render tree回流谤狡,這樣代價(jià)當(dāng)然會(huì)比較高灸眼,但如果是指body后面插入1個(gè)元素,則不會(huì)影響前面元素的回流墓懂。

5. 瀏覽器如何處理

每句JS操作都去回流重繪的話,瀏覽器可能就會(huì)受不了匕积。

瀏覽器會(huì)維護(hù)1個(gè)隊(duì)列,把所有會(huì)引起回流榜跌、重繪的操作放入這個(gè)隊(duì)列闪唆,等隊(duì)列中的操作到了一定的數(shù)量或者到了一定的時(shí)間間隔,瀏覽器就會(huì)flush隊(duì)列钓葫,進(jìn)行一個(gè)批處理础浮。這樣就會(huì)讓多次的回流、重繪變成一次回流重繪霸旗。

雖然有了瀏覽器的優(yōu)化,但有時(shí)候我們寫的一些代碼可能會(huì)強(qiáng)制瀏覽器提前flush隊(duì)列撵枢,這樣瀏覽器的優(yōu)化可能就起不到作用了精居。當(dāng)你請(qǐng)求向?yàn)g覽器請(qǐng)求一些 style信息的時(shí)候,就會(huì)讓瀏覽器flush隊(duì)列:

  1. offsetTop, offsetLeft, offsetWidth, offsetHeight
  2. scrollTop/Left/Width/Height
  3. clientTop/Left/Width/Height
  4. width,height
  5. 請(qǐng)求了getComputedStyle(), 或者 IE的 currentStyle

當(dāng)你請(qǐng)求上面的一些屬性的時(shí)候沃但,瀏覽器為了給你最精確的值佛吓,需要flush隊(duì)列,因?yàn)殛?duì)列中可能會(huì)有影響到這些值的操作淤刃。即使你獲取元素的布局和樣式信息跟最近發(fā)生或改變的布局信息無關(guān)吱型,瀏覽器都會(huì)強(qiáng)行刷新渲染隊(duì)列。引擎會(huì)重新渲染來確保獲取的值 是實(shí)時(shí)的铝侵。

6. 如何減少回流與重繪

減少回流、重繪其實(shí)就是需要減少對(duì)render tree的操作(合并多次多DOM和樣式的修改)狐赡,并減少對(duì)一些style信息的請(qǐng)求嗜诀,盡量利用好瀏覽器的優(yōu)化策略孔祸。

  1. 對(duì)Render Tree的計(jì)算通常只需要遍歷一次就可以完成崔慧,但table及其內(nèi)部元素除外,他們可能需要多次計(jì)算温自,通常要花3倍于同等元素的時(shí)間皇钞,這也是為什么要避免使用table布局的原因之一。
  2. 盡可能在DOM樹的最末端改變class馆里。避免設(shè)置多層內(nèi)聯(lián)樣式可柿。將動(dòng)畫效果應(yīng)用到position屬性為absolute或fixed的元素上。避免使用CSS表達(dá)式(例如:calc())营密。
  3. 避免頻繁操作樣式目锭,最好一次性重寫style屬性,或者將樣式列表定義為class并一次性更改class屬性被去。避免頻繁操作DOM世分,創(chuàng)建一個(gè)documentFragment,在它上面應(yīng)用所有DOM操作踪央,最后再把它添加到文檔中。也可以先為元素設(shè)置display: none健无,操作結(jié)束后再把它顯示出來液斜。因?yàn)樵赿isplay屬性為none的元素上進(jìn)行的DOM操作不會(huì)引發(fā)回流和重繪少漆。避免頻繁讀取會(huì)引發(fā)回流/重繪的屬性,如果確實(shí)需要多次使用示损,就用一個(gè)變量緩存起來检访。對(duì)具有復(fù)雜動(dòng)畫的元素使用絕對(duì)定位,使它脫離文檔流医清,否則會(huì)引起父元素及后續(xù)元素頻繁回流卖氨。

6. 再次理解display:none 與 visibility:hidden 的異同

  1. 兩者都可以在頁面上隱藏節(jié)點(diǎn)。
    • display:none 隱藏后的元素不占據(jù)任何空間持搜。它的寬度焙矛、高度等各種屬性值都將“丟失”
    • visibility:hidden 隱藏的元素空間依舊存在。它仍具有高度贫导、寬度等屬性值
  2. 性能的角度而言蟆盹,即是回流與重繪的方面。
    • display:none 會(huì)觸發(fā) reflow(回流)
    • visibility:hidden 只會(huì)觸發(fā) repaint(重繪)峰档,因?yàn)闆]有發(fā)現(xiàn)位置變化

他們兩者在優(yōu)化中 visibility:hidden 會(huì)顯得更好讥巡,因?yàn)槲覀儾粫?huì)因?yàn)樗ジ淖兞宋臋n中已經(jīng)定義好的顯示層次結(jié)構(gòu)了。

  1. 對(duì)子元素的影響
    • display:none 一旦父節(jié)點(diǎn)元素應(yīng)用了 display:none槽棍,父節(jié)點(diǎn)及其子孫節(jié)點(diǎn)元素全部不可見抬驴,而且無論其子孫元素如何設(shè)置 display 值都無法顯示;
    • visibility:hidden 一旦父節(jié)點(diǎn)元素應(yīng)用了 visibility:hidden豌拙,則其子孫后代也都會(huì)全部不可見鳖链。不過存在隱藏“失效”的情況墩莫。當(dāng)其子孫元素應(yīng)用了 visibility:visible狂秦,那么這個(gè)子孫元素又會(huì)顯現(xiàn)出來。

無線性能優(yōu)化:Composite

一個(gè) Web 頁面的展示侧啼,簡(jiǎn)單來說可以認(rèn)為經(jīng)歷了以下下幾個(gè)步驟堪簿。

性能優(yōu)化

提升為合成層簡(jiǎn)單說來有以下幾點(diǎn)好處:

  1. 合成層的位圖椭更,會(huì)交由 GPU 合成,比 CPU 處理要快
  2. 當(dāng)需要 repaint 時(shí)虑瀑,只需要 repaint 本身舌狗,不會(huì)影響到其他的層
  3. 對(duì)于 transform 和 opacity 效果,不會(huì)觸發(fā) layout 和 paint

1. 提升動(dòng)畫效果的元素

合成層的好處是不會(huì)影響到其他元素的繪制朝氓,因此,為了減少動(dòng)畫元素對(duì)其他元素的影響嘹狞,從而減少 paint誓竿,我們需要把動(dòng)畫效果中的元素提升為合成層。

提升合成層的最好方式是使用 CSS 的 will-change 屬性涧偷。從上一節(jié)合成層產(chǎn)生原因中燎潮,可以知道 will-change 設(shè)置為 opacity确封、transform再菊、top、left秉剑、bottom稠诲、right 可以將元素提升為合成層。

#target {
  will-change: transform; //兼容性不好
}
//對(duì)于那些目前還不支持 will-change 屬性的瀏覽器
//目前常用的是使用一個(gè) 3D transform 屬性來強(qiáng)制提升為合成層
#target {
  transform: translateZ(0);
}

但需要注意的是略水,不要?jiǎng)?chuàng)建太多的渲染層劝萤。因?yàn)槊縿?chuàng)建一個(gè)新的渲染層稳其,就意味著新的內(nèi)存分配和更復(fù)雜的層的管理。

如果你已經(jīng)把一個(gè)元素放到一個(gè)新的合成層里煤傍,那么可以使用 Timeline 來確認(rèn)這么做是否真的改進(jìn)了渲染性能嘱蛋。別盲目提升合成層五续,一定要分析其實(shí)際性能表現(xiàn)疙驾。

2. 使用 transform 或者 opacity 來實(shí)現(xiàn)動(dòng)畫效果

其實(shí)從性能方面考慮郭毕,最理想的渲染流水線是沒有布局和繪制環(huán)節(jié)的,只需要做合成層的合并即可:

為了實(shí)現(xiàn)上述效果扳肛,就需要只使用那些僅觸發(fā) Composite 的屬性挖息。目前兽肤,只有兩個(gè)屬性是滿足這個(gè)條件的:transforms 和 opacity。

3. 減少繪制區(qū)域

  1. 對(duì)于不需要重新繪制的區(qū)域應(yīng)盡量避免繪制电禀,以減少繪制區(qū)域害驹,比如一個(gè) fix 在頁面頂部的固定不變的導(dǎo)航 header宛官,在頁面內(nèi)容某個(gè)區(qū)域 repaint 時(shí)瓦糕,整個(gè)屏幕包括 fix 的 header 也會(huì)被重繪。
  2. 而對(duì)于固定不變的區(qū)域亥揖,我們期望其并不會(huì)被重繪圣勒,因此可以通過之前的方法,將其提升為獨(dú)立的合成層挚歧。

4. 合理管理合成層:創(chuàng)建一個(gè)新的合成層并不是免費(fèi)的滑负,它得消耗額外的內(nèi)存和管理資源。實(shí)際上帮匾,在內(nèi)存資源有限的設(shè)備上痴鳄,合成層帶來的性能改善,可能遠(yuǎn)遠(yuǎn)趕不上過多合成層開銷給頁面性能帶來的負(fù)面影響哼转。

大多數(shù)人都很喜歡使用 translateZ(0) 來進(jìn)行所謂的硬件加速槽华,以提升性能猫态,但是性能優(yōu)化并沒有所謂的“銀彈”,translateZ(0) 不是勇凭,本文列出的優(yōu)化建議也不是义辕。拋開了對(duì)頁面的具體分析,任何的性能優(yōu)化都是站不住腳的璧函,盲目的使用一些優(yōu)化措施基显,結(jié)果可能會(huì)適得其反撩幽。因此切實(shí)的去分析頁面的實(shí)際性能表現(xiàn),不斷的改進(jìn)測(cè)試宪萄,才是正確的優(yōu)化途徑榨惰。

最后读串,給大家推薦一個(gè)前端學(xué)習(xí)進(jìn)階內(nèi)推交流群685910553前端資料分享)撒妈,不管你在地球哪個(gè)方位排监,
不管你參加工作幾年都?xì)g迎你的入駐S叽病(群內(nèi)會(huì)定期免費(fèi)提供一些群主收藏的免費(fèi)學(xué)習(xí)書籍資料以及整理好的面試題和答案文檔!)

如果您對(duì)這個(gè)文章有任何異議谷暮,那么請(qǐng)?jiān)谖恼略u(píng)論處寫上你的評(píng)論盛垦。

如果您覺得這個(gè)文章有意思腾夯,那么請(qǐng)分享并轉(zhuǎn)發(fā),或者也可以關(guān)注一下表示您對(duì)我們文章的認(rèn)可與鼓勵(lì)班利。

愿大家都能在編程這條路榨呆,越走越遠(yuǎn)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末闯割,一起剝皮案震驚了整個(gè)濱河市纽谒,隨后出現(xiàn)的幾起案子如输,更是在濱河造成了極大的恐慌不见,老刑警劉巖崔步,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件井濒,死亡現(xiàn)場(chǎng)離奇詭異列林,居然都是意外死亡酪惭,警方通過查閱死者的電腦和手機(jī)春感,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門鲫懒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人甲献,你說我怎么就攤上這事颂翼。” “怎么了锥累?”我有些...
    開封第一講書人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵桶略,是天一觀的道長(zhǎng)诲宇。 經(jīng)常有香客問我姑蓝,道長(zhǎng),這世上最難降的妖魔是什么旭愧? 我笑而不...
    開封第一講書人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任宙暇,我火速辦了婚禮占贫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘瞳收。我一直安慰自己,他們只是感情好谐宙,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開白布卧惜。 她就那樣靜靜地躺著夹纫,像睡著了一般舰讹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上钻洒,一...
    開封第一講書人閱讀 51,125評(píng)論 1 297
  • 那天素标,我揣著相機(jī)與錄音萍悴,去河邊找鬼。 笑死计维,一個(gè)胖子當(dāng)著我的面吹牛撕予,可吹牛的內(nèi)容都是我干的实抡。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼艺蝴,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了姑荷?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤胯盯,失蹤者是張志新(化名)和其女友劉穎计露,沒想到半個(gè)月后票罐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡疗杉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年烟具,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了朝聋。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片囤躁。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡割以,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出猜极,到底是詐尸還是另有隱情消玄,我是刑警寧澤翩瓜,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布兔跌,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏蕊蝗。R本人自食惡果不足惜赖舟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一宾抓、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧幢泼,春花似錦旭绒、人聲如沸焦人。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丹允。三九已至,卻和暖如春袋倔,著一層夾襖步出監(jiān)牢的瞬間雕蔽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來泰國(guó)打工宾娜, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留批狐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓前塔,卻偏偏與公主長(zhǎng)得像嚣艇,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子华弓,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容