一、瀏覽器結(jié)構(gòu)

[圖片上傳失敗...(image-c86aca-1731466116879)]
1、用戶界面
除了瀏覽器請(qǐng)求的網(wǎng)頁之外，瀏覽器的操作面、按鈕等，都屬于瀏覽器的用戶界面。

2、瀏覽器引擎
可以加載指定URL，比如瀏覽器的前進(jìn)/后退/刷新/主頁等操作。
看一查看會(huì)話各方面，比如頁面加載進(jìn)度/js console alert

3、渲染引擎
下面細(xì)說

4、網(wǎng)絡(luò)
實(shí)現(xiàn)HTTP/FTP傳輸協(xié)議

5、JavaScript解釋器

6、XML解析器
將XML轉(zhuǎn)換成DOM樹。

7、顯示后端
顯示后端提供繪圖和窗口原語，包括：用戶界面控件集合、字體集合。

8、數(shù)據(jù)持久層
將瀏覽器回話相關(guān)聯(lián)的各種數(shù)據(jù)存儲(chǔ)在硬盤上。比如，cookie，安全證書，緩存等。

二、渲染引擎的組成及功能

[圖片上傳失敗...(image-fc0c5-1731466116880)]
1、HTML解析器
2、CSS解析器
3、JavaScript解析器
4、布局
5、繪圖

1、Parsing HTML to Construct DOM Tree
1.1 HTML解析器將HTML/XML文檔轉(zhuǎn)換成DOM節(jié)點(diǎn)，生成DOM 樹
1.2 CSS解析器解析樣式規(guī)則

2、Render Tree construction
將CSS附著到DOM 樹，生成渲染樹

3、Layout of Render Tree
為每個(gè)節(jié)點(diǎn)分配屏幕上出現(xiàn)的坐標(biāo)

4、Painting Render Tree
渲染引擎遍歷渲染樹，繪制節(jié)點(diǎn)

三、為什么一般把script放在 body 尾部， link 標(biāo)簽放在 head 內(nèi)部，而頁面通過CDN引入第三方框架或庫時(shí)，基本都是將其script標(biāo)簽放在link標(biāo)簽前面

1、CSS加載不會(huì)阻塞DOM樹解析，但會(huì)阻塞渲染樹的生成，從而阻塞頁面DOM結(jié)構(gòu)的渲染。
2、JS會(huì)阻塞DOM解析，以及渲染。
3、CSS的加載緩慢會(huì)阻塞JS的加載和執(zhí)行。
4、JS執(zhí)行會(huì)觸發(fā)頁面render。

所以
script放在頁面尾部，避免因?yàn)镴S的加載緩慢阻塞整個(gè)頁面的加載（這部分JS的執(zhí)行可能改變DOM結(jié)構(gòu)，所以需要先渲染DOM樹，再執(zhí)行）。
script標(biāo)簽放在link標(biāo)簽前面，避免CSS加載影響外部調(diào)用的JS的執(zhí)行（這部分JS通常為外部調(diào)用的庫，不操作頁面DOM樹）。