# 瀏覽器的工作原理

<font color="blue">

#### HTML採用**DTD**格式
#### HTML無法**與上下文無關的語法**來定義
</font>

### 呈現引擎
* 瀏覽器屏幕上顯示請的內容。
* 呈現引擎可顯示HTML和XML文檔與圖片。
* 還可以顯示其他類型的內容。ex:使用PDF查看器就能顯示PDF文檔。

### Safari和Chrome使用 **Webkit**
Webkit 是一種開放源代碼呈現引擎，起初用於Linux平台。

可以解析的格式都必須對應確定的語法。
由**詞匯**和**語法**規則構成
分成兩種：
1. 詞法分析：將輸入的內容分割成大量標記的過程（<font color="red">標記是語法中的詞匯，即構成內容的單位</font>）
2. 語法分析

## Webkit

#### 自動生成解析器
1. 用於創建詞法分析器。
**Flex:** Flex輸入是包含標記的正規表達式定義的文件
2. 用於創建解析器。
**Bison:** Bison採用**BNF**格式的語言語法法規

<font color="red">ＢＵＴ！</font>

HTML並不能很容易地用解析器所需的與上下文無關的語法來定義。

HTML與XML非常相似，有很多XML解析器可以使用。

區別在於：
> HTML處理更為寬容，它允許你省略某些隱式添加標記

HTML如此流行的原因：
他能包容你的錯誤，簡化網路開發，另一方面，這使得它很難編寫正式的語法。

#### 概括的說： HTML無法很容易地通過常規解析器解析（因為它的語法不是與上下文無關的語法），也無法通過XML解析器解析。

---

HTML採用**DTD**格式(文檔類型定義)

### DTD:
包括所有允許使用的元素及其屬性和層次結構的定義。
存在一些變體，嚴格模式完全遵守HTML規範，而其他模式可支持以前的瀏覽器所使用的標記，是確保向下兼容一些早期版本的內容。

### DOM:
它是HTML文檔的對象表示，同時也是外部內容(JavaScript)與HTML元素之間的接口。

> 解析器的輸出"解析樹"是由DOM元素和屬性節點構成。

> 樹是由實現了某個DOM接口的元素構成的。

#### 解析原因：
1. 語言的寬容本質。
2. 瀏覽器歷來對一些常見的無效HTML採用包容。
3. 解析過程需不斷反覆，源內容在解析過程中，通常不會改變，但在HTML中，腳本標記內容如果包含document.write，就會額外添加標記，這樣解析內容過程實際上就更改了輸入內容。

### 由於不能使用常規的解析技術

瀏覽器創建了自定義解析器來解析HTML

算法有兩階段組成：

一、 標記化
二、 樹建構

標記化是詞法分析過程，將輸入內容解析成多個標記。
HTML標記包括：
1. 起始標記
2. 結束標記
3. 屬性名稱
4. 屬性值

> 標記生成器識別標記，傳遞給樹構造器。

### 標計化算法
初始狀態是數據狀態，遇到字符 < 時，狀態改為**標記打開狀態**，接收一個a-z字符會創建**起始標記**，狀態更改為**標記名稱狀態**，一直保持到接收 > 字符， 狀態改回**數據狀態**。
接收下一個輸入字符 / 時，會創建end tag token

> 數據狀態 -> 標記打開狀態 -> 標記名稱狀態 -> 數據狀態

參考資料：
[浏览器的工作原理：新式网络浏览器幕后揭秘](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#Render_tree_construction)