從伺服器接收到響應封包到解析頁面

輸入URL到頁面加載——從伺服器接收到響應封包到解析頁面

HTML解析，建構DOM

HTML到建構出DOM的過程簡述如下

Bytes(位元組流) → characters(字元流) → tokens(次元) → nodes(節點對象) → DOM(文檔對象模型)

整個過程大緻為:

1.Conversion轉換: 浏覽器将獲得的HTML内容(Bytes)基于定義的編碼格式進行轉換為單個字元(characters)
2.Tokenizing分詞: 浏覽器按照HTML規範标準将這些字元轉換為不同的标記token.每個token都有自己獨特的含義以及規則集
3.Lexing詞法分析: 将token轉換為節點對象,節點對象中定義了他們的屬性與規則
4.DOM建構: 根據節點對象的關系,最終形成DOM樹
           

CSS生成規則

與DOM建構的過程類似

Bytes(位元組流) → characters(字元流) → tokens(次元) → nodes(節點對象) → CSSOM(樣式表對象模型)

建構渲染樹及渲染

當有了DOM和CSSOM後，兩者會對應組合起來。但是比如有一些

display: none

的元素是不會生成在渲染樹中的。

渲染的大緻流程如下：

1.計算CSS樣式
2.建構渲染樹
3.根據定位坐标,大小,層疊關系将進行布局
4.繪制圖像
           

回流和重繪

• Layout也稱Reflow，即回流。一般意味着元素的内容，結構，位置和尺寸發生了變化，需要重新計算樣式生成渲染樹。
• Repaint，即重繪。意味着元素發生的改變隻是影響了元素的一些外觀之類的時候，隻需要重新繪制這個元素就可以了。

回流的成本是高于重繪的，優化方案中一般避免回流。

1.減少逐項改變樣式，最好一次性将樣式改變。
2.避免循環操作dom，可以建立一個documentFragment，先應用DOM上的操作再進行添加。
3.避免多次讀取Offset等屬性，無法避免則緩存變量。
4.将複雜的元素絕對定位或固定定位，使其脫離文檔流。
           

loaded和DOMContentLoaded

• DOMContentLoaded事件觸發時，僅當DOM加載完成，不包括樣式表，圖檔
• load事件觸發時，頁面上所有的DOM，樣式表，腳本，圖檔都已經加載完成了

總結

​ 接上文，當浏覽器接收到伺服器的響應封包後，首先會進行HTML解析，将位元組流通過定義的編碼格式轉為字元流，然後根據HTML規範将字元分詞，每個字元都有自己的屬性和規則，最後将次元進行詞法分析生成節點對象，将節點對象組成DOM樹。此時如果遇見JS外鍊請求将阻塞DOM樹的生成，遇見CSS和圖檔的外鍊則不會對其阻塞影響。

​ 解析完DOM後則會觸發DOMContentLoaded事件。

​ CSS的解析步驟跟DOM一樣，當計算完CSS樣式後，兩者會進行組合生成渲染樹，渲染樹會進行圖像的繪制，此時如果全部檔案已經加載完畢将觸發loaded事件。

​ 下面會等待JS解釋引擎的觸發。

上篇