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