一嫉髓、瀏覽器結(jié)構(gòu)
[圖片上傳失敗...(image-c86aca-1731466116879)]
1、用戶界面
除了瀏覽器請求的網(wǎng)頁之外邑闲，瀏覽器的操作面算行、按鈕等，都屬于瀏覽器的用戶界面苫耸。
2州邢、瀏覽器引擎
可以加載指定URL，比如瀏覽器的前進/后退/刷新/主頁等操作褪子。
看一查看會話各方面量淌，比如頁面加載進度/js console alert
3、渲染引擎
下面細說
4嫌褪、網(wǎng)絡
實現(xiàn)HTTP/FTP傳輸協(xié)議
5呀枢、JavaScript解釋器
6、XML解析器
將XML轉(zhuǎn)換成DOM樹笼痛。
7裙秋、顯示后端
顯示后端提供繪圖和窗口原語，包括：用戶界面控件集合缨伊、字體集合摘刑。
8、數(shù)據(jù)持久層
將瀏覽器回話相關(guān)聯(lián)的各種數(shù)據(jù)存儲在硬盤上倘核。比如泣侮，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é)點，生成DOM 樹
1.2 CSS解析器解析樣式規(guī)則
2癣猾、Render Tree construction
將CSS附著到DOM 樹敛劝，生成渲染樹
3、Layout of Render Tree
為每個節(jié)點分配屏幕上出現(xiàn)的坐標
4纷宇、Painting Render Tree
渲染引擎遍歷渲染樹夸盟，繪制節(jié)點
三、為什么一般把script放在 body 尾部像捶， link 標簽放在 head 內(nèi)部上陕，而頁面通過CDN引入第三方框架或庫時，基本都是將其script標簽放在link標簽前面
1拓春、CSS加載不會阻塞DOM樹解析释簿，但會阻塞渲染樹的生成，從而阻塞頁面DOM結(jié)構(gòu)的渲染硼莽。
2庶溶、JS會阻塞DOM解析，以及渲染懂鸵。
3渐尿、CSS的加載緩慢會阻塞JS的加載和執(zhí)行。
4矾瑰、JS執(zhí)行會觸發(fā)頁面render。
所以
script放在頁面尾部隘擎，避免因為JS的加載緩慢阻塞整個頁面的加載（這部分JS的執(zhí)行可能改變DOM結(jié)構(gòu)殴穴，所以需要先渲染DOM樹，再執(zhí)行）货葬。
script標簽放在link標簽前面采幌，避免CSS加載影響外部調(diào)用的JS的執(zhí)行（這部分JS通常為外部調(diào)用的庫，不操作頁面DOM樹）震桶。
