成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

站在TA的角度來看HTML，認(rèn)識會大不一樣

余學(xué)文 / 1191人閱讀

摘要：從字節(jié)流到字符流使用各種各樣的編輯器編寫文檔時，使用的編碼格式是不一樣的，如，等。解碼這一步驟就發(fā)生在，從字節(jié)流到字符流這一過程中。到此，完成了從字節(jié)流到樹的過程，。

TA就是，HTML解釋器

從WebKit內(nèi)核的HTML解釋器的角度來看HTML。了解HTML文檔是如何從字節(jié)流，一步步到DOM樹的。理解這個過程，很多前端開發(fā)時一知半解的問題都能夠很好地理解了。

總覽解釋過程

首先HTML解釋器接受到的是字節(jié)流（Bytes），經(jīng)過解碼之后是字符流（Characters），然后通過詞法分析器切成詞語（Tokens），之后經(jīng)過語法分析器構(gòu)建成節(jié)點（Node），最后這些節(jié)點被組建成一棵DOM樹（Document Object Model Tree）。

幾乎所有的語言都有類似的一個“編譯”過程，我們可以不關(guān)心每個流程中具體代碼的細(xì)節(jié)，但每個過程發(fā)生了什么還是要了解的。

從字節(jié)流（Bytes）到字符流（Characters）

使用各種各樣的編輯器編寫HTML文檔時，使用的編碼格式是不一樣的，如UTF-8，GBK等。這些編輯器的保存實際上就是把字符流使用編碼格式保存成字節(jié)流文件的過程。而這些使用的編碼格式之所以要在HTML文檔內(nèi)部注明，就是為了瀏覽器的HTML解釋器能夠正確地進(jìn)行解碼。

解碼這一步驟就發(fā)生在，從字節(jié)流（Bytes）到字符流（Characters）這一過程中。

如果解釋器在HTML網(wǎng)頁中找到了設(shè)置的編碼格式，WebKit會使用相應(yīng)的解碼器將字節(jié)流轉(zhuǎn)換成特定格式的字符串。如果沒有，則會使用默認(rèn)的（UTF－8）來解碼。

所以，您知道如何解決網(wǎng)頁亂碼問題了吧，在網(wǎng)絡(luò)爬蟲中，經(jīng)常涉及網(wǎng)頁亂碼問題哦。

從字符流（Characters）到詞語（Tokens）

這個過程一般叫詞法分析，在WebKit中使用一個狀態(tài)機來完成，總之就是輸入字符串，輸出一個個詞語。在自然語言處理中，也有類似的過程，叫分詞。

WebKit定義了6中詞語類別，DOCTYPE，StartTag，EndTag，Comment，Character，EndOfFile。
分詞之后，WebKit還會做一些安全處理。

從詞語（Tokens）到節(jié)點（Node）

Webkit接下來會對安全的詞語，更具詞語的6類別，分別調(diào)用類似processXXX這樣的不同的函數(shù)，來將詞語處理成節(jié)點。

從節(jié)點（Node）到DOM樹（Document Object Model Tree）

類比其他語言，會根據(jù)詞法分析的結(jié)果構(gòu)建語法樹，而HTML則構(gòu)建的是DOM樹。

因為HTML文檔的Tag標(biāo)簽是有開始和結(jié)束標(biāo)記的，類似括號匹配，不難想象可以利用數(shù)據(jù)結(jié)構(gòu)棧來實現(xiàn)DOM樹的構(gòu)建。有興趣可以去了解下，如何編程實現(xiàn)計算任意的1+3*(5-3)這類表達(dá)式......

另外，當(dāng)我們忘記書寫一個Tag的結(jié)束標(biāo)記時，在構(gòu)建DOM樹的過程中，會利用棧的特性幫我們自動補上。

到此，完成了從字節(jié)流到DOM樹的過程，^_^。

當(dāng)然這里假設(shè)只有HTML。

參考書籍：《WebKit技術(shù)內(nèi)幕》

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54323.html

相關(guān)文章

  • 站在TA的角度來看HTML，認(rèn)識會大不一樣

    摘要：從字節(jié)流到字符流使用各種各樣的編輯器編寫文檔時，使用的編碼格式是不一樣的，如，等。解碼這一步驟就發(fā)生在，從字節(jié)流到字符流這一過程中。到此，完成了從字節(jié)流到樹的過程，。 TA就是，HTML解釋器 從WebKit內(nèi)核的HTML解釋器的角度來看HTML。了解HTML文檔是如何從字節(jié)流，一步步到DOM樹的。理解這個過程，很多前端開發(fā)時一知半解的問題都能夠很好地理解了。 總覽解釋過程 首先HTM...

    helloworldcoding 評論0 收藏0

  • 精讀《JS 引擎基礎(chǔ)之 Shapes and Inline Caches》

    摘要：概述的解釋器優(yōu)化器代碼可能在字節(jié)碼或者優(yōu)化后的機器碼狀態(tài)下執(zhí)行，而生成字節(jié)碼速度很快，而生成機器碼就要慢一些了。比如有一個函數(shù)，從獲取值引擎生成的字節(jié)碼結(jié)構(gòu)是這樣的指令是獲取參數(shù)指向的對象，并存儲在，第二步則返回。 1 引言 本期精讀的文章是：JS 引擎基礎(chǔ)之 Shapes and Inline Caches 一起了解下 JS 引擎是如何運作的吧！ JS 的運作機制可以分為 AST 分...

    Tecode 評論0 收藏0

  • PHP 微服務(wù)之【分布式事務(wù)】閱讀提示

    摘要：前幾天寫一篇，一種新思路實現(xiàn)分布式事務(wù)的文章。寫個分布式事務(wù)就有人開始噴了事務(wù)提交了，怎么回滾都知道怎么回滾。 前幾天寫一篇 ， 一種新思路實現(xiàn)分布式事務(wù)的文章。https://segmentfault.com/a/11... 部分死腦筋就開始，各種不解?？捶答?確實有點搞笑。 不要一聽到 session 就覺得是 $_SEESION不要別人換個名字 token 或者 jwt 就不認(rèn)識...

    canger 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<