前端頁面渲染機制-筆記

前端頁面渲染機制-筆記

瀏覽器基礎結構

• 1.用戶界面（user interface）：用戶所看到及與之交互的功能組件，如地址欄、返回、前進按鈕
• 2.瀏覽器引擎（browser engine）：用戶界面和呈現引擎之間傳遞指令
• 3.渲染引擎（呈現引擎）（rendering engine）：負責解析用戶請求的內容（HTML,CSS,XML）
• 4.網絡（networking）：負責處理網絡相關的事物（HTTP）
• 5.UI後端（UI backend）：負責繪製提示框等瀏覽器組件，底層使用的是操做系統的用戶接口
• 6.JavaScript解釋器（JavaScript interpreter）：負責解析和執行JavaScript代碼
• 7.數據存儲（Data storage）：負責持久存儲如cookie和緩存等應用數據

渲染引擎及關鍵渲染路徑

經過網絡模塊加載到HTML文件後渲染引擎渲染流程以下（關鍵渲染路徑）

• 1.構建DOM樹（DOM tree）:從上到下解析HTML文檔生成DOM節點樹
• 2.構建CSSOM樹（CSS Object Model）：加載解析樣式生成CSSOM樹
• 3.執行JavaScript：加載執行JavaScript代碼
• 4.構建渲染樹（render tree）：根據DOM樹和CSSOM樹，生成渲染樹
  渲染樹：按順序展現在屏幕上的一系列矩形這些矩形帶有字體，顏色和尺寸等視覺屬性
• 5.佈局（layout）：根據渲染樹將節點佈局在屏幕的正確位置
• 6.繪製（painting）：遍歷渲染樹繪製全部節點，爲每一個節點適用對應的樣式（UI後端模塊完成）