瀏覽器渲染頁(yè)面流程

SHERlocked93 發(fā)布于2019-04-22 17:02 / 706人閱讀

摘要：談?wù)勛枞灰暈樽枞秩镜馁Y源，也很好理解，要不然怎么構(gòu)建，怎么進(jìn)行布局處理呀因此瀏覽器會(huì)等待構(gòu)建完畢。標(biāo)簽會(huì)阻塞解析，因?yàn)榭赡軙?huì)改變和，因此瀏覽器會(huì)先解析，避免浪費(fèi)。布局發(fā)生了改變?yōu)g覽器需要重新從這一步開(kāi)始，因?yàn)橐呀?jīng)變了。

談?wù)勛枞?

css： css被視為阻塞渲染的資源，也很好理解，要不然怎么構(gòu)建render tree，怎么進(jìn)行布局處理呀~~ 因此瀏覽器會(huì)等待CSSOM tree構(gòu)建完畢。

js：?script標(biāo)簽會(huì)阻塞html解析，因?yàn)閖s可能會(huì)改變dom和css，因此瀏覽器會(huì)先解析script，避免浪費(fèi)。要想避免阻塞的話，可使用defer 和 async。

談?wù)凴epaint和Reflow

Repaint：發(fā)生在屏幕的一部分要重新畫(huà)，比如背景顏色，布局沒(méi)有改變！，瀏覽器只需要走第五步。

Reflow：布局發(fā)生了改變！瀏覽器需要重新從Layout這一步開(kāi)始，因?yàn)镽ender tree已經(jīng)變了。多走一步，顯然更加耗費(fèi)性能啦~~

所以呢重點(diǎn)關(guān)注會(huì)引起Reflow的操作：當(dāng)你增加、刪除、修改DOM結(jié)點(diǎn)時(shí)，會(huì)導(dǎo)致Reflow或Repaint 當(dāng)你移動(dòng)DOM的位置，或是搞個(gè)動(dòng)畫(huà)的時(shí)候。當(dāng)你修改CSS樣式的時(shí)候。當(dāng)你Resize窗口的時(shí)候（移動(dòng)端沒(méi)有這個(gè)問(wèn)題），或是滾動(dòng)的時(shí)候。注：display:none會(huì)觸發(fā)reflow，而visibility:hidden只會(huì)觸發(fā)repaint，因?yàn)闆](méi)有發(fā)現(xiàn)位置變化。

云服務(wù)器 GPU云服務(wù)器頁(yè)面渲染測(cè)速 jsp 瀏覽器渲染頁(yè)面流程圖 js頁(yè)面流程圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/871.html

相關(guān)文章

【干貨】十分鐘讀懂瀏覽器渲染流程

摘要：部分讀者向我反饋對(duì)于最后的瀏覽器渲染布局這塊不是很清晰，所以本文就瀏覽器渲染流程單獨(dú)開(kāi)篇講解，希望大家都能有新的收獲。瀏覽器主要組件結(jié)構(gòu)瀏覽器主要組件渲染引擎和使用自主研發(fā)的渲染引擎。所以瀏覽器的渲染過(guò)程主要包括以下幾步解析生成樹(shù)。在之前寫(xiě)過(guò)的一篇《天龍八步細(xì)說(shuō)瀏覽器輸入U(xiǎn)RL后發(fā)生了什么》一文中，和大家分享了從在瀏覽器中輸入網(wǎng)址URL到最終頁(yè)面展示的整個(gè)過(guò)程。部分讀者向我反饋對(duì)于最...

Warren 2019-08-30 14:12 評(píng)論0 收藏0
【干貨】十分鐘讀懂瀏覽器渲染流程

摘要：部分讀者向我反饋對(duì)于最后的瀏覽器渲染布局這塊不是很清晰，所以本文就瀏覽器渲染流程單獨(dú)開(kāi)篇講解，希望大家都能有新的收獲。瀏覽器主要組件結(jié)構(gòu)瀏覽器主要組件渲染引擎和使用自主研發(fā)的渲染引擎。所以瀏覽器的渲染過(guò)程主要包括以下幾步解析生成樹(shù)。在之前寫(xiě)過(guò)的一篇《天龍八步細(xì)說(shuō)瀏覽器輸入U(xiǎn)RL后發(fā)生了什么》一文中，和大家分享了從在瀏覽器中輸入網(wǎng)址URL到最終頁(yè)面展示的整個(gè)過(guò)程。部分讀者向我反饋對(duì)于最...

lanffy 2019-08-22 15:36 評(píng)論0 收藏0
【干貨】十分鐘讀懂瀏覽器渲染流程

摘要：部分讀者向我反饋對(duì)于最后的瀏覽器渲染布局這塊不是很清晰，所以本文就瀏覽器渲染流程單獨(dú)開(kāi)篇講解，希望大家都能有新的收獲。瀏覽器主要組件結(jié)構(gòu)瀏覽器主要組件渲染引擎和使用自主研發(fā)的渲染引擎。所以瀏覽器的渲染過(guò)程主要包括以下幾步解析生成樹(shù)。在之前寫(xiě)過(guò)的一篇《天龍八步細(xì)說(shuō)瀏覽器輸入U(xiǎn)RL后發(fā)生了什么》一文中，和大家分享了從在瀏覽器中輸入網(wǎng)址URL到最終頁(yè)面展示的整個(gè)過(guò)程。部分讀者向我反饋對(duì)于最...

Heier 2019-08-01 18:43 評(píng)論0 收藏0
瀏覽器渲染流程&Composite（渲染層合并）簡(jiǎn)單總結(jié)

摘要：渲染層合并對(duì)頁(yè)面中元素的繪制是在多個(gè)層上進(jìn)行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負(fù)責(zé)子樹(shù)和負(fù)責(zé)的子樹(shù)，只有是作為紋理上傳給的。整個(gè)圖在中其實(shí)有幾種不同的層類型渲染層，這是負(fù)責(zé)對(duì)應(yīng)子樹(shù)圖形層，這是負(fù)責(zé)對(duì)應(yīng)子樹(shù)。梳理瀏覽器渲染流程首先簡(jiǎn)單了解一下瀏覽器請(qǐng)求、加載、渲染一個(gè)頁(yè)面的大致過(guò)程： DNS 查詢 TCP 連接 HTTP 請(qǐng)求即響應(yīng) 服務(wù)器響應(yīng) 客戶...

willin 2019-08-22 16:34 評(píng)論0 收藏0
瀏覽器渲染流程&Composite（渲染層合并）簡(jiǎn)單總結(jié)

摘要：渲染層合并對(duì)頁(yè)面中元素的繪制是在多個(gè)層上進(jìn)行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負(fù)責(zé)子樹(shù)和負(fù)責(zé)的子樹(shù)，只有是作為紋理上傳給的。整個(gè)圖在中其實(shí)有幾種不同的層類型渲染層，這是負(fù)責(zé)對(duì)應(yīng)子樹(shù)圖形層，這是負(fù)責(zé)對(duì)應(yīng)子樹(shù)。梳理瀏覽器渲染流程首先簡(jiǎn)單了解一下瀏覽器請(qǐng)求、加載、渲染一個(gè)頁(yè)面的大致過(guò)程： DNS 查詢 TCP 連接 HTTP 請(qǐng)求即響應(yīng) 服務(wù)器響應(yīng) 客戶...

Channe 2019-08-29 15:06 評(píng)論0 收藏0