瀏覽器渲染過程

網頁內容的組成

• doctype: 提供瀏覽器的html版本信息

• head : html頭部

  • meta: 元數據信息

    • charset: 聲明當前文檔所實用的字符編碼
    • http-equiv: 客戶端行爲，如渲染模式，緩存等
    • name[keywords]: 搜索引擎關鍵字
    • name[description]: 搜索引擎描述
    • name[viewport]: 瀏覽器視口設置
  • link
  • script: 須要在body前完成加載或運行的腳本

• body: html實體

  • script: 須要在body解析時加載或運行的腳本

渲染須要作的工做

經過上面的圖能夠知道，網頁內容首先會被html解析器解析成一個DOM樹，實際上html是咱們最早會經過網址向服務器請求回來的，請求回來的html從字節流轉成字符流，咱們的瀏覽器實際拿到的就是一個字符流，而後瀏覽器經過詞法分析對輸入字節流進行逐字掃描，根據構詞規則識別單詞和符號，分詞，生成相應的token，以後會將這些token經過nextToken()添加到dom樹中去。因此html解析是從上到下對文檔進行一個此法分析，因此它首先遇到html標籤的時候會對html生成一個token，這個token會被標記成一個startTag的類型，對於header的花也會被標記成startTag，可是它會聲稱爲headerToken，就是說對於不一樣類型的html標籤格式，在詞法分析的過程當中，會解析成一個相應的對象，而後token類型會被瀏覽器解析，最後會將token類型append到dom樹上去。

在這個過程當中，html中可能會經過link去引入其餘相應的資源，好比css的資源，這個時候瀏覽器可能就會兵法的向服務器去請求這個相關的靜態資源，請求回來後經過css解析器對其進行解析，從而生成一個css樹，去和dom樹進行結合生成一個render Tree，進一步的進行一個佈局，最終進行繪製。

加載

• css的加載不會阻塞dom解析，可是會阻塞頁面渲染，因此通常把css加載放在頭部
• css會去阻塞js的執行，就是說css資源在加載完以前，js的執行會被阻塞，可是css不會阻塞js腳本的加載
• js會去阻塞頁面dom的解析
• js不阻塞資源的加載
• js順序執行，阻塞後續js邏輯的執行