在瀏覽器地址欄輸入網(wǎng)址---看到網(wǎng)頁的過程
瀏覽器基礎(chǔ)結(jié)構(gòu)：
- 用戶界面（用戶所看到及與之交互的功能組件，如地址欄，返回，前進(jìn)按鈕等）
- 瀏覽器引擎（負(fù)責(zé)控制和管理下一級的渲染引擎）
- 渲染引擎（負(fù)責(zé)解析用戶請求的內(nèi)容，如html，xml）
- 網(wǎng)絡(luò)（處理http請求）
- UI后端（負(fù)責(zé)繪制提示框等瀏覽器組件，底層使用的是操作系統(tǒng)的用戶接口）
- javascript解釋器（解析js代碼）
- 數(shù)據(jù)存儲（cookie、localStorage、sessionStorage緩存）
1,當(dāng)用戶訪問頁面時(shí)，瀏覽器需要獲取用戶請求內(nèi)容，這個(gè)過程主要涉及瀏覽器網(wǎng)絡(luò)模塊：
用戶在地址欄輸入域名，如baidu.com，DNS（Domain Name System，域名解析系統(tǒng)）服務(wù)器根據(jù)輸入的域名查找對應(yīng)IP，然后向該IP地址發(fā)起請求；
2.瀏覽器獲得并解析服務(wù)器的返回內(nèi)容(HTTP response)；
3.瀏覽器加載HTML文件及文件內(nèi)包含的外部引用文件及圖片，多媒體等資源。
多進(jìn)程
瀏覽器網(wǎng)絡(luò)部分通常是有幾個(gè)平行進(jìn)程同時(shí)開啟，但是也會有
限制，一般為2-6個(gè)。
渲染引擎所做的事是將請求內(nèi)容展現(xiàn)給我們，默認(rèn)支持HTML,XML和圖片類型，對于其他諸如PDF等類型的內(nèi)容則需要安裝相應(yīng)插件，但瀏覽器的展示工作流程基本是一樣的。
關(guān)鍵渲染路徑
1.構(gòu)建DOM樹(DOM tree)：從上到下解析HTML文檔生成DOM節(jié)點(diǎn)樹（DOM tree），也叫內(nèi)容樹（content tree）；
2.構(gòu)建CSSOM(CSS Object Model)樹：加載解析樣式生成CSSOM樹；
3.執(zhí)行JavaScript：加載并執(zhí)行JavaScript代碼（包括內(nèi)聯(lián)代碼或外聯(lián)JavaScript文件）；
4.構(gòu)建渲染樹(render tree)：根據(jù)DOM樹和CSSOM樹,生成渲染樹(render tree)；
渲染樹：按順序展示在屏幕上的一系列矩形，這些矩形帶有字體，顏色和尺寸等視覺屬性。
5.布局（layout）：根據(jù)渲染樹將節(jié)點(diǎn)樹的每一個(gè)節(jié)點(diǎn)布局在屏幕上的正確位置；
6.繪制（painting）：遍歷渲染樹繪制所有節(jié)點(diǎn)，為每一個(gè)節(jié)點(diǎn)適用對應(yīng)的樣式，這一過程是通過UI后端模塊完成；
渲染引擎同js一樣都是單線程操作
解析文檔順序
瀏覽器按從上到下的順序掃描解析文檔；
腳本或許是由于通常會在JavaScript腳本中改變文檔DOM結(jié)構(gòu)，于是瀏覽器以同步方式解析，加載和執(zhí)行腳本，瀏覽器在解析文檔時(shí)，當(dāng)解析到標(biāo)簽時(shí)，會解析其中的腳本（對于外鏈的JavaScript文件，需要先加載該文件內(nèi)容，再進(jìn)行解析），然后立即執(zhí)行，這整個(gè)過程都會阻塞文檔解析，直到腳本執(zhí)行完才會繼續(xù)解析文檔。就是說由于腳本是同步加載和執(zhí)行的，它會阻塞文檔解析，這也解釋了為什么現(xiàn)在通常建議將js腳本放在標(biāo)簽后面。現(xiàn)在HTML5提供defer和async兩個(gè)屬性支持延遲和異步加載JavaScript文件，如：
<script defer src="script.js">
樣式不同于腳本，瀏覽器對樣式的處理并不會阻塞文檔解析，大概是因?yàn)闃邮奖聿⒉粫淖僁OM結(jié)構(gòu)。
