2023-02-27 深入瀏覽器渲染原理

1. 網(wǎng)頁(yè)解析的過(guò)程

  1. 輸入U(xiǎn)RL地址后, 下載index.html文件
  2. 解析html文件,遇到css或者js文件,再下載

2. 瀏覽器的內(nèi)核

常見(jiàn)的瀏覽器內(nèi)核有

  • Trident ( 三叉戟):IE、360安全瀏覽器、搜狗高速瀏覽器、百度瀏覽器、UC瀏覽器;
  • Gecko( 壁虎) :Mozilla Firefox;
  • Presto(急板樂(lè)曲)-> Blink (眨眼):Opera
  • Webkit :Safari、360極速瀏覽器、搜狗高速瀏覽器、移動(dòng)端瀏覽器(Android、iOS)
  • Webkit -> Blink :Google Chrome,Edge

經(jīng)常說(shuō)的瀏覽器內(nèi)核指的是瀏覽器的排版引擎:

排版引擎(layout engine),也稱(chēng)為瀏覽器引擎(browser engine)、頁(yè)面渲染引擎(rendering engine)或樣版引擎。

3. 解析引擎的工作流程

4. 渲染頁(yè)面的詳細(xì)流程

5. HTML解析過(guò)程

默認(rèn)情況下服務(wù)器會(huì)給瀏覽器返回index.html文件,所以解析HTML是所有步驟的開(kāi)始:

解析HTML,會(huì)構(gòu)建DOM Tree:

6. 解析css規(guī)則

解析的html過(guò)程中,如果遇到CSS的link元素,那么會(huì)由瀏覽器負(fù)責(zé)下載對(duì)應(yīng)的CSS文件:

  • 注意:下載CSS文件是不會(huì)影響DOM的解析的;

解析出對(duì)應(yīng)的規(guī)則樹(shù):稱(chēng)之為 CSSOM(CSS Object Model,CSS對(duì)象模型);

7. 構(gòu)建Render Tree

1. 注意一:link元素不會(huì)阻塞DOM Tree的構(gòu)建過(guò)程,但是會(huì)阻塞Render Tree的構(gòu)建過(guò)程

  • 這是因?yàn)镽ender Tree在構(gòu)建時(shí),需要對(duì)應(yīng)的CSSOM Tree;

2. 注意二:Render Tree和DOM Tree并不是一一對(duì)應(yīng)的關(guān)系,比如對(duì)于display為none的元素,壓根不會(huì)出現(xiàn)在render tree中;

8. 布局(layout)和繪制(Paint)

在渲染樹(shù)(Render Tree)上運(yùn)行布局(Layout)以計(jì)算每個(gè)節(jié)點(diǎn)的幾何體。

渲染樹(shù)會(huì)表示顯示哪些節(jié)點(diǎn)以及其他樣式,但是不表示每個(gè)節(jié)點(diǎn)的尺寸、位置等信息;

布局是確定呈現(xiàn)樹(shù)中所有節(jié)點(diǎn)的寬度、高度和位置信息;

在繪制階段,瀏覽器將布局階段計(jì)算的每個(gè)frame轉(zhuǎn)為屏幕上實(shí)際的像素點(diǎn);

包括將元素的可見(jiàn)部分進(jìn)行繪制,比如文本、顏色、邊框、陰影、替換元素(比如img)

8. 回流和重繪

8.1 理解回流reflow:(也可以稱(chēng)之為重排)

第一次確定節(jié)點(diǎn)的大小和位置,稱(chēng)之為布局(layout)。

之后對(duì)節(jié)點(diǎn)的大小、位置修改重新計(jì)算稱(chēng)之為回流。

8.2 什么情況下引起回流?

  • 比如DOM結(jié)構(gòu)發(fā)生改變(添加新的節(jié)點(diǎn)或者移除節(jié)點(diǎn));
  • 比如改變了布局(修改了width、height、padding、font-size等值)
  • 比如窗口resize(修改了窗口的尺寸等)
  • 比如調(diào)用getComputedStyle方法獲取尺寸、位置信息;

8.3 理解重繪repaint:

第一次渲染內(nèi)容稱(chēng)之為繪制(paint)。

之后重新渲染稱(chēng)之為重繪。

8.4 什么情況下會(huì)引起重繪?

比如修改背景色、文字顏色、邊框顏色、樣式等;

8.5 兩者的關(guān)系

回流一定會(huì)引起重繪,所以回流是一件很消耗性能的事情

8.6 避免發(fā)生回流

  1. 修改樣式時(shí)盡量一次性修改, 比如通過(guò)cssText修改,比如通過(guò)添加class修改
  2. 盡量避免頻繁的操作DOM, 我們可以在一個(gè)DocumentFragment或者父元素中, 將要操作的DOM操作完成,再一次性的操作;
  3. 盡量避免通過(guò)getComputedStyle獲取尺寸、位置等信息;
  4. 對(duì)某些元素使用position的absolute或者fixed

9. 特殊解析 – composite合成

默認(rèn)情況下,標(biāo)準(zhǔn)流中的內(nèi)容都是被繪制在同一個(gè)圖層(Layer)中的;

一些特殊的屬性,會(huì)創(chuàng)建一個(gè)新的合成層( CompositingLayer ),并且新的圖層可以利用GPU來(lái)加速繪制;
因?yàn)槊總€(gè)合成層都是單獨(dú)渲染的;

創(chuàng)建新圖層的常見(jiàn)屬性:

  • 3D transforms
  • video、canvas、iframe
  • opacity 動(dòng)畫(huà)轉(zhuǎn)換時(shí);
  • position: fixed
  • will-change:一個(gè)實(shí)驗(yàn)性的屬性,提前告訴瀏覽器元素可能發(fā)生哪些變化;
  • animation 或 transition 設(shè)置了opacity、transform;

分層確實(shí)可以提高性能,但是它以?xún)?nèi)存管理為代價(jià),因此不應(yīng)作為 web 性能優(yōu)化策略的一部分過(guò)度使用。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評(píng)論 6 546
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,814評(píng)論 3 429
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 178,980評(píng)論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 64,064評(píng)論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,779評(píng)論 6 414
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 56,109評(píng)論 1 330
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評(píng)論 3 450
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 43,287評(píng)論 0 291
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,799評(píng)論 1 338
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,515評(píng)論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,750評(píng)論 1 375
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評(píng)論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,933評(píng)論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 35,327評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 36,667評(píng)論 1 296
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,492評(píng)論 3 400
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,703評(píng)論 2 380

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

  • 前言 瀏覽器的內(nèi)核是指支持瀏覽器運(yùn)行的最核心的程序,分為兩個(gè)部分的,一是渲染引擎,另一個(gè)是JS引擎。渲染引擎在不同...
    前端三少爺閱讀 433評(píng)論 0 5
  • 一、認(rèn)識(shí)瀏覽器內(nèi)核Trident(IE)Gecko(火狐)Blink(Chrome、Opera)Webkit(Sa...
    chan7788閱讀 319評(píng)論 0 0
  • 一、瀏覽器如何渲染網(wǎng)頁(yè) 要了解瀏覽器渲染頁(yè)面的過(guò)程,首先得知道一個(gè)名詞——關(guān)鍵路徑渲染。關(guān)鍵渲染路徑(Critic...
    Srtian閱讀 1,006評(píng)論 1 3
  • 瀏覽器如何渲染網(wǎng)頁(yè) 要了解瀏覽器渲染頁(yè)面的過(guò)程,首先得知道一個(gè)名詞——關(guān)鍵渲染路徑。關(guān)鍵渲染路徑是指瀏覽器從最初接...
    oWSQo閱讀 32,964評(píng)論 5 74
  • 1.網(wǎng)頁(yè)的解析過(guò)程 2. 瀏覽器渲染流程 3.回流和重繪解析 4.合成和性能優(yōu)化 5.defer和async屬性 ...
    未路過(guò)閱讀 565評(píng)論 0 1