HTML詞法和語法
阿新 • • 發佈:2019-02-21
一個 ken 元素 src start 意義 cool 解析 字符
1. 詞 token
專業不是計算機的博主比較尷尬,一直以為token就是驗證身份用的標識
token —— 表示 “最小有意義的單元”
以這個簡單的p標簽為例,我們分析哪些是token:
<p class="a">text text text</p>
按最小有意義單元的定義來看,第一個詞(token)是什麽呢?顯然,作為一個詞(token),整個 p 標簽肯定是過大了(它甚至可以嵌套)。
正確來說,應該拆分成這樣:
- <p “標簽開始”的開始
- class=“a” 屬性
- > “標簽開始”的結束
- text text text 文本
- </p> 標簽結束
2. 詞法解析 —— 獲取token
瀏覽器的詞法是怎麽解析的呢?
眾所周知,瀏覽器獲取的是一個一個的字節。
因此,瀏覽器每獲得一個字符就會走一次分析邏輯,直到獲取一個完整的token
最常見的實現就是 狀態機 (簡單來說就是每獲取一個字符,就根據上一次狀態和輸入的字符,來轉換一次狀態,直到獲得一個token)
3. 語法解析 —— 用toke來構建DOM樹(實際是一個棧)
其實構建DOM樹也是一個狀態機,需要根據上一次狀態和輸入的token來獲取新的棧的狀態
以一個簡單的HTML為例:
<html maaa=a > <head> <title>cool</title> </head> <body> <img src="a" /> </body> </html>
- 創建一個棧(js用數組代替)
- 棧頂元素就是當前節點;
- 遇到屬性,就添加到當前節點;
- 遇到文本節點,如果當前節點是文本節點,則跟文本節點合並,否則入棧成為當前節點的子節點;
- 遇到註釋節點,作為當前節點的子節點;
- 遇到 tag start 就入棧一個節點,當前節點就是這個節點的父節點;
- 遇到 tag end 就出棧一個節點(還可以檢查是否匹配)。
HTML詞法和語法