瀏覽器渲染頁面流程

jzzlee 發(fā)布于2019-04-22 16:34 / 2215人閱讀

摘要：談?wù)勛枞灰暈樽枞秩镜馁Y源，也很好理解，要不然怎么構(gòu)建，怎么進(jìn)行布局處理呀因此瀏覽器會(huì)等待構(gòu)建完畢。標(biāo)簽會(huì)阻塞解析，因?yàn)榭赡軙?huì)改變和，因此瀏覽器會(huì)先解析，避免浪費(fèi)。布局發(fā)生了改變?yōu)g覽器需要重新從這一步開始，因?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ā)生在屏幕的一部分要重新畫，比如背景顏色，布局沒有改變！，瀏覽器只需要走第五步。

Reflow：布局發(fā)生了改變！瀏覽器需要重新從Layout這一步開始，因?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)畫的時(shí)候。當(dāng)你修改CSS樣式的時(shí)候。當(dāng)你Resize窗口的時(shí)候（移動(dòng)端沒有這個(gè)問題），或是滾動(dòng)的時(shí)候。注：display:none會(huì)觸發(fā)reflow，而visibility:hidden只會(huì)觸發(fā)repaint，因?yàn)闆]有發(fā)現(xiàn)位置變化。

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/850.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

Channe 2019-08-29 15:06 評論0 收藏0