<s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

    1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>

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

      2020-10-21 09:20:00
      薛才杰
      原創
      1345
      摘要:之前和大家分享了從在瀏覽器中輸入網址URL到最終頁面展示的整個過程。本文就瀏覽器渲染流程單獨開篇講解,希望大家都能有新的收獲。
      在之前寫過的一篇 《"天龍八步"細說瀏覽器輸入URL后發生了什么》一文中,和大家分享了從在瀏覽器中輸入網址URL到最終頁面展示的整個過程。部分讀者向我反饋對于最后的瀏覽器渲染布局這塊不是很清晰,所以本文就瀏覽器渲染流程單獨開篇講解,希望大家都能有新的收獲。

      瀏覽器主要組件結構

      (瀏覽器主要組件)

      渲染引擎——webkit和Gecko

      Firefox使用Geoko——Mozilla自主研發的渲染引擎。


      Safari和Chrome都使用webkit。Webkit是一款開源渲染引擎,它本來是為linux平臺研發的,后來由Apple移植到Mac及Windows上。


      本文我主要以webkit渲染引擎來講解,盡管webkit和Gecko使用的術語稍有不同,他們的主要流程基本相同。

      (webkit渲染引擎流程)

      關鍵渲染路徑

      關鍵渲染路徑是指瀏覽器從最初接收請求來的HTML、CSS、javascript等資源,然后解析、構建樹、渲染布局、繪制,最后呈現給客戶能看到的界面這整個過程。

      所以瀏覽器的渲染過程主要包括以下幾步:
      1. 解析HTML生成DOM樹。
      2. 解析CSS生成CSSOM規則樹。
      3. 將DOM樹與CSSOM規則樹合并在一起生成渲染樹。
      4. 遍歷渲染樹開始布局,計算每個節點的位置大小信息。
      5. 將渲染樹每個節點繪制到屏幕。

      構建DOM樹

      當瀏覽器接收到服務器響應來的HTML文檔后,會遍歷文檔節點,生成DOM樹。

      需要注意的是,DOM樹的生成過程中可能會被CSS和JS的加載執行阻塞。渲染阻塞問題下文會講。

      構建CSSOM規則樹

      瀏覽器解析CSS文件并生成CSS規則樹,每個CSS文件都被分析成一個StyleSheet對象,每個對象都包含CSS規則。CSS規則對象包含對應于CSS語法的選擇器和聲明對象以及其他對象。

      渲染阻塞

      當瀏覽器遇到一個 script 標記時,DOM 構建將暫停,直至腳本完成執行,然后繼續構建DOM。每次去執行JavaScript腳本都會嚴重地阻塞DOM樹的構建,如果JavaScript腳本還操作了CSSOM,而正好這個CSSOM還沒有下載和構建,瀏覽器甚至會延遲腳本執行和構建DOM,直至完成其CSSOM的下載和構建。

      所以,script 標簽的位置很重要。實際使用時,可以遵循下面兩個原則:

      CSS 優先:引入順序上,CSS 資源先于 JavaScript 資源。
      JS置后:我們通常把JS代碼放到頁面底部,且JavaScript 應盡量少影響 DOM 的構建。

      當解析html的時候,會把新來的元素插入dom樹里面,同時去查找css,然后把對應的樣式規則應用到元素上,查找樣式表是按照從右到左的順序去匹配的。

      例如: div p {font-size: 16px},會先尋找所有p標簽并判斷它的父標簽是否為div之后才會決定要不要采用這個樣式進行渲染)。
      所以,我們平時寫CSS時,盡量用id和class,千萬不要過渡層疊。

      構建渲染樹

      通過DOM樹和CSS規則樹我們便可以構建渲染樹。瀏覽器會先從DOM樹的根節點開始遍歷每個可見節點。對每個可見節點,找到其適配的CSS樣式規則并應用。

      渲染樹構建完成后,每個節點都是可見節點并且都含有其內容和對應規則的樣式。這也是渲染樹與DOM樹的最大區別所在。渲染樹是用于顯示,那些不可見的元素當然就不會在這棵樹中出現了,譬如。除此之外,display等于none的也不會被顯示在這棵樹里頭,但是visibility等于hidden的元素是會顯示在這棵樹里頭的。

      渲染樹布局

      布局階段會從渲染樹的根節點開始遍歷,然后確定每個節點對象在頁面上的確切大小與位置,布局階段的輸出是一個盒子模型,它會精確地捕獲每個元素在屏幕內的確切位置與大小。

      渲染樹繪制

      在繪制階段,遍歷渲染樹,調用渲染器的paint()方法在屏幕上顯示其內容。渲染樹的繪制工作是由瀏覽器的UI后端組件完成的。

      reflow與repaint:

      根據渲染樹布局,計算CSS樣式,即每個節點在頁面中的大小和位置等幾何信息。HTML默認是流式布局的,CSS和js會打破這種布局,改變DOM的外觀樣式以及大小和位置。這時就要提到兩個重要概念:replaint和reflow。
      replaint:屏幕的一部分重畫,不影響整體布局,比如某個CSS的背景色變了,但元素的幾何尺寸和位置不變。
      reflow: 意味著元件的幾何尺寸變了,我們需要重新驗證并計算渲染樹。是渲染樹的一部分或全部發生了變化。這就是Reflow,或是Layout。
      所以我們應該盡量減少reflow和replaint,我想這也是為什么現在很少有用table布局的原因之一。

      display:none 會觸發 reflow,visibility: hidden屬性并不算是不可見屬性,它的語義是隱藏元素,但元素仍然占據著布局空間,它會被渲染成一個空框,所以visibility:hidden 只會觸發 repaint,因為沒有發生位置變化。

      有些情況下,比如修改了元素的樣式,瀏覽器并不會立刻 reflow 或 repaint 一次,而是會把這樣的操作積攢一批,然后做一次 reflow,這又叫異步 reflow 或增量異步 reflow。
      有些情況下,比如 resize 窗口,改變了頁面默認的字體等。對于這些操作,瀏覽器會馬上進行 reflow。

      小結

      本文我們就瀏覽器渲染流程逐步了解了一遍,相信大家一定都有所新的收獲,如果大家對于瀏覽器渲染流程還有任何疑問,歡迎反饋,我們共同交流,共同學習,共同進步。


      參考文獻:
      http://taligarsiel.com/Projects/howbrowserswork1.htm
      https://segmentfault.com/a/1190000012960187
      https://sylvanassun.github.io/2017/10/03/2017-10-03-BrowserCriticalRenderingPath/
      https://www.zybuluo.com/lizlalala/note/435042

      聯系我們

      聯系人:ZSITE交流群

      電話/微信:

      Email:

      QQ:

      地址:青島市黃島區井岡山路157號中南金石國際廣場A座3205室

      无遮挡H肉动漫视频在线观看
        <s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

      1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>