国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

瀏覽器渲染頁面流程

snowell / 1589人閱讀

摘要：標(biāo)簽會(huì)阻塞解析，因?yàn)榭赡軙?huì)改變和，因此瀏覽器會(huì)先解析，避免浪費(fèi)。談?wù)労桶l(fā)生在屏幕的一部分要重新畫，比如背景顏色，布局沒有改變，瀏覽器只需要走第五步。布局發(fā)生了改變?yōu)g覽器需要重新從這一步開始，因?yàn)橐呀?jīng)變了。

瀏覽器步驟：

  1. 解析HTML文本，構(gòu)建dom tree
  2. 歇息CSS樣式表，構(gòu)建CSSOM tree
  3. 根據(jù)DOM tree和 CSSOM tree 構(gòu)建Render tree
  4. 根據(jù)Render tree來進(jìn)行布局處理（Layout）
  5. 將頁面元素進(jìn)行繪制（Painting）

?

談?wù)勛枞?/h2>

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)位置變化。

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

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

相關(guān)文章

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

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

    Warren 評(píng)論0 收藏0

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

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

    lanffy 評(píng)論0 收藏0

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

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

    Heier 評(píng)論0 收藏0

  • 瀏覽器渲染流程&Composite（渲染層合并）簡(jiǎn)單總結(jié)

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

    willin 評(píng)論0 收藏0

  • 瀏覽器渲染流程&Composite（渲染層合并）簡(jiǎn)單總結(jié)

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

    Channe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<