總共分2部： 1. 加載：加載渲染所必須的html代碼 2. 渲染：將html繪制成圖像結果 <br> # 加載 ## 資源加載機制 #### 資源加載器 1. 特定資源加載器：針對每種資源類型的特定加載器，僅加載某一種資源。 2. 緩存資源加載器：與常規的緩存邏輯相同，特定加載器先通過緩存資源加載器來查找是否有緩存資源，如果在資源緩存池中存在緩存資源，則取出以便使用；若不存在，發送請求給網絡模塊 3. 通用資源加載器：由于加載資源大多屬于網絡請求，而網絡請求的邏輯是可以被特定資源加載器所共享的，所以通用資源加載器只負責通過網絡獲得目標資源的數據，但不負責進一步解析。 #### 資源緩存 1. Page Cache：頁面緩存 2. Memory Cache：內存緩存 3. Disk Cache：磁盤緩存 <br> ## 網絡棧 1. 確定請求類型，協議 2. 判斷是否需要建立網絡連接 3. 建立http事務 4. 建立tcp socket連接 5. 套接字連接 <br> ## 預先加載 1. DNS預取 2. 資源預取 3. TCP preconnet  上圖是 DNS預取，提前拿到dns解析，異步的，不會影響UI渲染 <br> <br> ## TCP相關 ## 如何提高加載速度 合并請求： * 雪碧圖 * nginx模塊合并 * 合并資源請求，見下圖 緩存：from cache(memory，disk)，localStorage，本地緩存策略，http頭緩存優化(基礎庫最大緩存時間長，業務庫緩存時間設置短) tcp網絡連接優化：tcp調優，http/2，keep-live 硬件：加大帶寬，使用cdn(對象存儲) 資源大小：gzip，webp，圖片壓縮，cookie體積 預加載：多個cdn域名，dns預取，異步請求js，  上圖是Tengine(nginx分支)服務器合并資源請求 <br> <br> # 渲染 ## HTML解釋器 #### 解釋過程 資源的變換： 1. 字節流 2. 字符流 3. Tokens 4. 節點 5. DOM樹 流程： 1. 詞法分析 2. XSSAuditor 3. 語法分析 4. 生成DOM樹 #### 詞法分析 通過HTMLTokenizer來進行詞法分析 詞法分析的任務是對輸入字節流進行逐字掃描，根據構詞規則識別單詞和符號，分詞 詞法分析器的主要接口是nextToken()函數，調用者只需要將字符串傳入，就會得到一個詞語。 注意，在這里并不涉及標簽類型信息，這是之后語法分析的工作 <br> #### CSS解釋器 <br>