文章目錄

• 一、PC端常用瀏覽器/概念
• • 1.2軟件項目開發二個不同體系
• 二、瀏覽器
• • 2.1 內核和js引擎
  • 2.2 瀏覽器的組成部分
  • 2.3 瀏覽器如何渲染UI？
  • 2.4 瀏覽器如何解析CSS選擇器？
  • 2.5 DOM樹如何創建？

一、PC端常用瀏覽器/概念

PC端瀏覽器 ：谷歌chrome;IE;火狐;Safari
移動端瀏覽器：Safari[蘋果];chrome[安卓]

1.2軟件項目開發二個不同體系

• B/S brows server [瀏覽器/服務器] ：網站;
• C/S client server[客戶機/服務器] ：QQ;大型網絡游戲

服務器：
1. 存儲數據： #mysql oracle sql server mongodb
2. 完成復雜功能： #nodejs php java c#

二、瀏覽器

2.1 內核和js引擎

瀏覽器內核[內核在瀏覽器內部用于渲染和解析html;css模塊]
Js引擎：執行網頁中的JavaScript程序

瀏覽器	內核（渲染引擎）	js引擎
IE（微軟舊版）	Trident	Chakra（for JScript）
Edge（微軟新版）	EdgeHTML	Chakra（for JavaScript）
Chrome	WebKit (Chrome 27)，Blink： WebKit升級（28~）	V8
Safari	WebKit	JavaScriptCore
Firefox	Gecko	SpiderMonkey
Node js		V8

2.2 瀏覽器的組成部分

1. 用戶界面：包括地址欄、前進/后退按鈕、書簽菜單等。
   除了瀏覽器主窗口顯示的您請求的頁面外，其他顯示的各個部分都屬于用戶界面

2. 瀏覽器引擎：在用戶界面和呈現引擎之間傳送指令。

3. 呈現引擎（渲染引擎）：負責顯示請求的內容。
   如果請求的內容是HTML，它就負責解析HTML和CSS內容，并將解析后的內容顯示在屏幕上。

4. 網絡：用于網絡調用，比如HTTP請求。
   其接口與平臺無關，并為所有平臺提供底層實現。

5. 用戶界面后端：用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操作系統的用戶界面方法。

6. JavaScript解釋器。用于解析和執行JavaScript 代碼。

7. 數據存儲：持久層，瀏覽需要在硬盤上保存各種數據，例如 Cookie。
   新的HTML規范(HTMLE5)定義了“網絡數據庫”，這是一個完整(但是輕便)的瀏覽器內數據庫.

2.3 瀏覽器如何渲染UI？

1. 瀏覽器獲取HTML文件， 解析并生成DOM樹
   根據HTML文件中的每個標簽生成DOM樹內存中對象
   
2. 解析CSS文件，生成Style Rules樹
3. 合并DOM樹和Style Rules樹，生成Render（渲染）樹
4. 布局（Layer）階段，為Render樹的每一個節點分配一個應出現的確切坐標
5. 調用GPU繪制（painter），遍歷Render樹節點，將元素呈現

2.4 瀏覽器如何解析CSS選擇器？

瀏覽器從右往左解析CSS選擇器。

DOM樹與Style Rules合并成為Render樹，實際上要將Style Rules附著到DOM 樹上，因此要根據選擇器提供的信息對DOM樹進行遍歷，才能將樣式附著到對應的DOM元素上。

示例：

.song_list li span {width: 23px;height: 17px;margin-right: 50px;
}

從右至左匹配：

1. 先找到所有的最右節點span，對于每一個span，向上尋找節點li
2. 由li再向上尋找class = song_list的節點
3. 最后找到根元素html則結束這個分支的遍歷。

從右向左的匹配在第一步就篩選掉了大顯的不符合條件的最右節點(葉子節點)，故效率更高。

2.5 DOM樹如何創建？

1.轉碼:瀏覽器將接收到的二進制數據按照指定編碼格式轉化為HTML字符串
2.生成Tokens:之后開始parser，瀏覽器會將HTML字符串解析成Tokens（檢查開始結束標簽等錯誤）

3.構建Nodes:Nodes為對象，對Node添加特定的屬性，通過指針確定Node的父、子、兄弟關系和所屬treeScope
4.生成DOM Tree: 通過node包含的指針確定的關系構建出DOM Tree

總結

以上是生活随笔為你收集整理的浏览器原理（组成、引擎、渲染机制）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。