Web前端效能優化（二）
Unsplash
1. 一個網站在瀏覽器端是如何進行渲染的呢？
我們在瀏覽器位址列輸入網址之後，瀏覽器會對我們輸入的 url 進行解析，並對相應的 IP 地址發起請求，請求所返回的是一段 HTML 文件，瀏覽器對該段 HTML 文件從上到下進行詞法分析，其具體過程為：遇到 HTML 標籤時，會生成一個 Token ，不同型別的標籤會解析成不同的 Token ，根據 Token 產生對應的節點 Node ，最終這些節點根據其巢狀關係，新增到 DOM 樹上
在詞法分析的過程中，HTML 文件中會通過 <link> 標籤進行 CSS 資源引入，此時瀏覽器就會 併發 的向網際網路或 CDN 請求相關的靜態資源，請求回來之後的 CSS 資源同樣會被瀏覽器解析，根據選擇器進行匹配並生成相應的 CSSOM 規則樹，跟 DOM 樹相結合生成渲染樹 Render Tree ，從而進行佈局 Layout 和繪製 Paint ，利用渲染樹的資訊，計算渲染樹中所有節點在頁面上的位置和大小，填充 Layout 中的具體內容和樣式
我們在 HTML 中所引入的外部資源，雖然是併發去請求的，但對於單個域名是存在併發上限的，即併發請求數是有一個上限的，這就導致很多資源沒有全部做到併發請求，所以我們在生產環境中，常常會設定 3 到 4 個 CDN 域名
2. 阻塞關係
CSS 和 JS 的載入都會引起阻塞，其中，CSS 通過 <link> 方式在 <head> 中進行引用，會阻塞頁面的渲染；CSS 不阻塞 JS 的載入，但會阻塞 JS 的執行，其原因在於 JS 有可能進行 DOM 操作，涉及到 CSS 樣式的修改，該操作基於所引入的 CSS 樣式基礎上進行的
直接引入的 JS 會阻塞頁面的渲染，JS 在執行過程中執行 document.write ，修改相關的文件結構，阻塞後面節點的建立，影響後續的文件結構渲染和分析，可以通過 defer 屬性 和 async 方式引入，避免這種情況出現，如果 JS 還操作了 CSSOM，而正好相關的 CSS 資源還沒有引入，瀏覽器甚至會延遲 JS 的執行和 DOM 樹的構建，直到完成其 CSSOM 的下載和構建，因此我們在引入 JS 資源時需要遵循兩個原則：1. CSS 資源優先引入；2. JS 資源於頁面底部引入，並儘量少影響 DOM 樹的構建
Webkit 具有預先掃描器和預資源載入器的能力，執行當前 JS 程式碼的時候，會通過預先掃描器去掃描後面的詞是否有引用到其他 JS 資源，就可以使用預先載入器併發的去請求後續資源，所以 JS 的執行不阻塞資源的載入
JS 執行在瀏覽器中是單執行緒的，所以 JS 是順序執行並且會阻塞後續 JS 邏輯的執行，會保持我們引用的依賴關係進行執行
End of File
行文過程中出現錯誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導更多人，最後，如果你覺得我的文章寫的還不錯，希望能夠點一下 喜歡 和 關注 ，為了我能早日成為簡書優秀作者獻上一發助攻吧，謝謝！^ ^