湖北十一选五上海SEO百度排名優化_刷百度排名行業領先-利為匯SEO一站式SEO服務,幫助企業網站快速排名,快速上首頁!

湖北十一选五 > 百度SEO排名優化 > 瀏覽器是怎樣工作的:渲染引擎,HTML解析(連載二) 攜程設計委(2)

湖北十一选五:瀏覽器是怎樣工作的:渲染引擎,HTML解析(連載二) 攜程設計委(2)

首頁 2020-01-02 13:03 百度SEO排名優化 89 ℃

湖北十一选五 www.bowhi.com

現在我們回到 Tag open state 狀態。吃掉下一個輸入/時會產生一個end tag token并變更為 Tag name state 狀態。同樣,此狀態保持到我們碰到時。這時新標簽符號完成......

現在我們回到“Tag open state”狀態。吃掉下一個輸入”/”時會產生一個”end tag token”并變更為“Tag name state”狀態。同樣,此狀態保持到我們碰到”>”時。這時新標簽符號完成,我們又回到“Data state”。同樣”</html>”也會被這樣處理。

瀏覽器的容錯

你永遠不會看到HTML頁面語法錯誤。瀏覽器會修正錯誤并繼續??純聰旅嫻睦櫻?/p>

收到body結束標簽后進入“after body”模式,收到html結束標簽后進入“after after body”模式。所有符號處理完后將終止解析。

圖 9: 示例輸入源的分詞處理

解析示例

在圖5中我們構建了一個數學表達式解析樹。讓我們來試著定義一個簡單的數學語言并看看解析是如何進行的。


樹的構建算法

當解析器被創建時,文檔對象也被創建了。在樹的構建過程中DOM樹的根節點(Documen)將被修改,元素被添加到上面去。每個分詞器完成的節點都會被樹構建器處理。規范中定義了每一個符號與哪個DOM對象相關。除了把元素添加到DOM樹外,它還會被添加到一個開放元素堆棧。這個堆棧用于糾正嵌套錯誤和標簽未關閉錯誤。這個算法也用狀態機描述,它的狀態叫做”insertion modes”。

讓我們來看一些Webkit容錯的例子:

轉換

多數情況下解析樹并非最終結果。解析經常是為了從輸入文檔轉換成另外一種格式。比如編譯器要把源碼編譯成機器碼,會首先解析成解析樹,再把解析樹轉換成機器碼。

理由如下:

圖 6: HTML解析流程 (源自HTML5規范)

Gecko 里把格式化好的可視元素稱做“幀樹”(Frame tree)。每個元素就是一個?。╢rame)。 Webkit 則使用”渲染樹”這個術語,渲染樹由”渲染對象”組成。Webkit 里使用”layout”表示元素的布局,Gecko則稱為”Reflow”。Webkit使用”Attachment”來連接DOM節點與可視化信息以構建渲染樹。一個非語義上的小差別是Gecko在HTML與DOM樹之間有一個附加的層 ,稱作”content sink”,是創建DOM對象的工廠。我們會討論流程中的每一部分。

渲染樹構建完成后就是”“處理,也就是確定每個節點在屏幕上的確切顯示位置。 下一個步驟是繪制—— 遍歷渲染樹并用UI后端層將每一個節點繪制出來。

示例——解析表達式”2 + 3 – 1″可以返回下面的樹:

解析器通常把工作分給兩個組件——分詞程序負責把輸入切分成合法符號序列,解析程序負責按照句法規則分析文檔結構和構建句法樹。詞法分析器知道如何過濾像空格,換行之類的無關字符。

<html> <mytag> </mytag> <div> <p> </div> Really lousy HTML </p> </html>

我一定違背了幾百萬條規則(”my tag”是非法標簽,”p”與”div”元素嵌套錯誤等等),但瀏覽器仍然正確地顯示,沒有任何抱怨。所以很多解析器代碼在修正這些HTML作者的錯誤。


解析過程是交互式的。解析器通?;崠喲史ǚ治銎骰袢⌒路挪⒊⑹云ヅ渚浞ü嬖?。如果匹配成功,就在句法樹上創建相應的節點,并繼續從詞法分析器獲取下一個符號。如果沒有匹配的規則,解析器會內部保存這個符號,并繼續從詞法分析器獲取符號,直到內部保存的所有符號能夠成功匹配一個規則。如果最終無法匹配,解析器會拋出異常。這意味著文檔無效,含有句法錯誤。

解析器——詞法分析器組合

解析器有兩個處理過程——詞法分析與句法分析。

瀏覽器是怎樣工作的:渲染引擎,HTML解析(連載二) 攜程設計委

分詞算法

算法的輸出是HTML符號。算法可以用狀態機來描述。 每一個狀態從輸入流中消費一個或多個字符,并根據它們更新下一狀態。決策受當前符號狀態和樹的構建狀態影響。這意味著同樣的字符可能會產生不同的結果,取決于當前的狀態。算法太復雜,我們用一個例子來看看它的原理。

if (!m_currentFormElement) { m_currentFormElement = new HTMLFormElement(formTag, m_document); } 過深的元素層級

注釋不言自喻:

瀏覽器是怎樣工作的:渲染引擎,HTML解析(連載二) 攜程設計委

瀏覽器是怎樣工作的:渲染引擎,HTML解析(連載二) 攜程設計委

這種自下而上的解析器叫作移位歸約解析器,因為輸入被向右移動(想象一下一個指針從指向輸入開始逐漸向右移動) 并逐漸歸約到句法樹。

瀏覽器是怎樣工作的:渲染引擎,HTML解析(連載二) 攜程設計委

共4頁:

上一頁

當前位置:湖北十一选五 > 百度SEO排名優化 > 瀏覽器是怎樣工作的:渲染引擎,HTML解析(連載二) 攜程設計委(2)

搜索
網站分類
標簽列表
{ganrao} 内蒙古快三走势图下载安装 广西期货配资网 中铁股票行情和讯网 广东快乐10分精准计划20分钟一期 棋牌类手游排行榜 极速赛车彩票官网 陕西11选五玩法 北京十一学校 如何进去 中国十大股票配资平台排名 广东十一选五杀号 山东福利彩票app pk10稳赢公式 福彩排列7的玩法 中国神华股票行情 青海快三开奖结果l今天 三分彩规律