瀏覽器的回流(重排)與重繪

圖片來自網(wǎng)絡(luò)

我們經(jīng)常說到瀏覽器的性能問題缚窿,其實(shí)與瀏覽器性能息息相關(guān)的一點(diǎn)就是瀏覽器如何渲染我們的網(wǎng)頁袍镀,這個(gè)時(shí)候我們就會(huì)涉及到一個(gè)概念聚谁,那就是瀏覽器的回流(重排评疗,以下統(tǒng)稱回流测砂,Reflow)與重繪(Repaint)。

回流

對(duì)回流這個(gè)詞百匆,我的理解是回爐重造砌些,即對(duì)于整個(gè)網(wǎng)頁重新渲染一遍。那我們可以思考一下加匈,從性能角度來講存璃,如果我們來寫瀏覽器的代碼,一定是再必須要重新渲染網(wǎng)頁的時(shí)候再重新渲染雕拼,那就推出一個(gè)問題纵东,什么時(shí)候?yàn)g覽器必須要重新渲染網(wǎng)頁?

其實(shí)必定是當(dāng)網(wǎng)頁的元素坐標(biāo)發(fā)生變化的時(shí)候啥寇,這里我們可以理解為有很多人在排隊(duì)篮迎,大家僅僅的依靠在一起,那什么時(shí)候大家需要都挪動(dòng)下位置呢示姿?我覺得要么就是一個(gè)人或者幾個(gè)人突然變胖了/瘦了,那大家如果想要繼續(xù)依靠在一起逊笆,就得都動(dòng)一動(dòng)栈戳;或者其中一個(gè)人或者幾個(gè)人挪動(dòng)了一下自己的位置,他勢(shì)必也會(huì)擠著其他人去動(dòng)一動(dòng)位置难裆。這種重新渲染全部或部分文檔的動(dòng)作我們就叫做回流子檀,因?yàn)榇蠹叶夹枰矂?dòng)下位置,也就導(dǎo)致我們這個(gè)網(wǎng)頁需要回爐重造了乃戈。

所以會(huì)導(dǎo)致回流的操作(包括但不限于):

  • 頁面首次渲染

  • 瀏覽器窗口大小發(fā)生改變

  • 元素尺寸或位置發(fā)生改變

  • 元素內(nèi)容變化(文字?jǐn)?shù)量或圖片大小等等)

  • 元素字體大小變化

  • 添加或者刪除可見DOM元素

  • 激活CSS偽類(例如::hover

重繪

還是拿排隊(duì)舉例褂痰,當(dāng)隊(duì)伍中的一個(gè)人需要換一件衣服,比如他從穿黃衣服換成穿紅色的衣服症虑,這個(gè)時(shí)候只要這一個(gè)人換件衣服就行了缩歪,對(duì)其他人并沒有影響,這種情況我們就叫做重繪谍憔。瀏覽器只需要對(duì)該元素進(jìn)行重新繪制即可匪蝙。

所以會(huì)導(dǎo)致回流的操作(包括但不限于):

  • 修改color/background-color/visibility

由上述可見,其實(shí)回流對(duì)瀏覽器性能的消耗是高于重繪的习贫,而且回流的操作一定會(huì)伴隨著重繪逛球,重繪卻不一定伴隨回流。那現(xiàn)代瀏覽器其實(shí)對(duì)這塊是有進(jìn)行優(yōu)化處理的苫昌,如果我們的隊(duì)伍總是需要變換位置颤绕,我們就統(tǒng)一來一次大排隊(duì)。

那么我們?cè)谄綍r(shí)的工作中,如果針對(duì)于回流和重繪寫出性能更好地代碼呢奥务?有以下幾點(diǎn)可以注意的:

CSS
  • 避免使用table布局物独。

  • 盡可能在DOM樹的最末端改變class

  • 避免設(shè)置多層內(nèi)聯(lián)樣式汗洒。

  • 將動(dòng)畫效果應(yīng)用到position屬性為absolutefixed的元素上议纯。

  • 避免使用CSS表達(dá)式(例如:calc())。

JavaScript
  • 避免頻繁操作樣式溢谤,最好一次性重寫style屬性瞻凤,或者將樣式列表定義為class并一次性更改class屬性。

  • 避免頻繁操作DOM世杀,創(chuàng)建一個(gè)documentFragment阀参,在它上面應(yīng)用所有DOM操作,最后再把它添加到文檔中瞻坝。

  • 也可以先為元素設(shè)置display: none蛛壳,操作結(jié)束后再把它顯示出來。因?yàn)樵?code>display屬性為none的元素上進(jìn)行的DOM操作不會(huì)引發(fā)回流和重繪所刀。

  • 避免頻繁讀取會(huì)引發(fā)回流/重繪的屬性衙荐,如果確實(shí)需要多次使用,就用一個(gè)變量緩存起來浮创。

  • 對(duì)具有復(fù)雜動(dòng)畫的元素使用絕對(duì)定位忧吟,使它脫離文檔流,否則會(huì)引起父元素及后續(xù)元素頻繁回流斩披。

參考 瀏覽器的回流與重繪 (Reflow & Repaint)


博客地址 北落師門

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末溜族,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子垦沉,更是在濱河造成了極大的恐慌煌抒,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件厕倍,死亡現(xiàn)場離奇詭異寡壮,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)绑青,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門诬像,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人闸婴,你說我怎么就攤上這事坏挠。” “怎么了邪乍?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵对竣,是天一觀的道長否纬。 經(jīng)常有香客問我,道長膜廊,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上菲驴,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好遥倦,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布消略。 她就那樣靜靜地躺著却紧,像睡著了一般断凶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上却嗡,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天舌镶,我揣著相機(jī)與錄音,去河邊找鬼否灾。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的崭别。 我是一名探鬼主播土榴,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼娃善,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼瑞佩!你這毒婦竟也來了聚磺?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤炬丸,失蹤者是張志新(化名)和其女友劉穎瘫寝,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體稠炬,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡焕阿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了首启。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片暮屡。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖毅桃,靈堂內(nèi)的尸體忽然破棺而出褒纲,到底是詐尸還是另有隱情,我是刑警寧澤钥飞,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布莺掠,位于F島的核電站,受9級(jí)特大地震影響读宙,放射性物質(zhì)發(fā)生泄漏彻秆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一结闸、第九天 我趴在偏房一處隱蔽的房頂上張望唇兑。 院中可真熱鬧,春花似錦桦锄、人聲如沸幔亥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至针肥,卻和暖如春饼记,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背慰枕。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來泰國打工具则, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人具帮。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓博肋,卻偏偏與公主長得像低斋,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子匪凡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

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