一、瀏覽器結構
- 用戶界面（User Interface）：包括交互組件，地址欄，返回前進按鈕
- 瀏覽器引擎（Browser engine）：控制和管理下一級的渲染引擎
- 渲染引擎（Rendering engine）：解析請求內容，HTML,XML,CSS
- 網絡（Networking）：處理HTTP請求等
- UI后端（UI backend）：繪制提示框等瀏覽器組件
- JavaScript解析器（JavaScript Interpreter）：解析和執行JavaScript代碼
- 數據存儲（Data Storage）持久化存儲，cookie,緩存
二、網絡請求過程
- 用戶在地址欄輸入域名，DNS（Domain Name System）域名解析服務器根據域名查找IP地址，向其發起請求
- 返回200響應碼，說明響應成功
- 瀏覽器得到并解析服務器返回的內容response
- 加載HTML文件，及所需js，css，image等資源
三、渲染過程（關鍵渲染路徑Critical Rendering Path）
- 構建DOM樹，從上到下解析HTML文檔生成DOM節點樹，也叫內容樹
- 構建CSSOM樹，加載解析樣式生成CSSOM樹
- 執行JavaScript，加載并執行JavaScript代碼
- 構建渲染樹Render Tree，根據DOM樹和CSSOM樹生成。按順序展示在屏幕的一系列矩陣，帶有字體，顏色，尺寸等屬性
- 布局Layout，根據渲染樹將節點樹的每一個節點布局在屏幕上的正確位置
-
繪制painting，遍歷渲染樹繪制所有節點，為每一個節點對應樣式
rendering path
瀏覽器會每處理一部分內容，并展現在屏幕上，所以頁面加載時是自上而下展現的
通常javascript會改變文檔DOM結構，瀏覽器以同步方式解析，加載和執行腳本，遇到<script>標簽時，會解析并立即執行直到完成，阻塞文檔的解析。所以一般建議將<script>放在<body>前，而不是<head>標簽內
而瀏覽器對樣式的解析不會阻塞文檔解析
布局Layout（或叫回流Reflow），通過渲染樹中渲染對象的信息，計算出每一個渲染對象的位置和尺寸，將其安置在瀏覽器窗口的正確位置。有時會在文檔布局完成后對DOM進行修改，就需要重新布局，稱為回流，本質上還是布局的過程
四、頁面渲染優化
- HTML文檔結構層次盡量少
- 腳本放最好在</body>前
- 首屏樣式內聯放在<head>內，樣式結構盡量簡單
- 減少DOM操作，盡量緩存訪問DOM的樣式信息
- 減少通過javascript代碼修改樣式，多操作class
- 動畫盡量使用在絕對定位或固定定位的元素上
- 緩存DOM查找，查找器盡量簡潔
- 涉及多域名的網站，可以開旗域名預解析
參考文章：前端頁面渲染機制-熊 建剛
