webkit源碼閱讀：dom樹的構建

 

今天關注webkit中dom樹是怎麼構建的，HTML是怎麼分析的。

1、dom相關的代碼在webcore中dom目錄下，有很多類，比較重要的是

Document.h、DocumentFragment.h、DocumentParser.h

DocumentParser是一個基類感覺好像沒幹什麼事，只是傳入了一個開始parse的狀態，在DocumentFragment中有parseHTML，好像開始了真正的parse操作；

 

2、HTML的parse操作，從DocumentFragment中的parseHTML開始，相關的parser放置在WebCore/html/parser下，具體是由HTMLDocumentParser來完成的。

 

DocumentFragment::parseHTML()

         -->HTMLDocumentParser::parseDocumentFragment()

             -->HTMLDocuemntParser::insert()

                      {

                         設定好輸入資料流

                         調用pumpTokenlizerIfPossible準備建樹

                      -->HTMLDocumentParser::pumpTokenlizerIfPossible()                       

                            -->HTMLDocumentParser::pumpTokenlizer（）

                                 {

                                          while（） {

                                                       HTMLTokenizer::nextToken（stream, HTMLToken::m_token）

                                                       HTMLTreeBuilder::constructTreeFromToken(m_token)

                                                               {

                                                                         將HTMLToken轉成AtomicHTMLToken；

                                                                        再調用建樹函數constructTreeFromAtomicToken(m_token);

                                                                        -->HTMLTreeBuilder::constructTreeFromAtomicToken()

                                                                            {

                                                                                   根據token的類型分別調用：

                                                                                    HTMLTreeBuilder::ASSERT_NOT_REACHED()

                                                                                    HTMLTreeBuilder::processDoctypeToken()

                                                                                    HTMLTreeBuilder::processStartTag()

\                                                                                    HTMLTreeBuilder::processEndTag()

                                                                                    HTMLTreeBuilder::processComment()

                                                                                    HTMLTreeBuilder::processCharacter()

                                                                                    HTMLTreeBuilder::processEndOfFile()

                                                                                   完成樹的構建

                                                                              }

                                                                 }

                                                    }

                                     }

                     }

整個Dom樹的構建過程非常清晰，其中一些比較重要的類，包括：HTMLDocumentParser完成parse的整體流程，協調HTMLInputStream、HTMLTokenlizer、HTMLTreeBuilder的工作，其中：

1）HTMLInputStream負責HTML資料的輸入；

2）HTMLTokenlizer根據輸入的資料流把HTML進行tokenlize；

3）HTMLTreeBuilder根據輸入的token進行建樹、完成樹的構建；

 

HTMLTokenlizer的實現就是一個大的狀態機器，根據input的資料，不斷變換著內部的狀態，完成tokenlization的過程，吐出一個個的token。

 

 樹的構建過程是通過HTMLTreeBuilder和HTMLContructionSite等類來完成的，Dom樹的構建過程是比較複雜的，但原理是比較清晰的，根據HTML檔案的嵌套順序，通過一個棧(HTMLElementStack m_openElements)來儲存當前開啟的節點標籤。假設一段HTML的資料如下：

<div>

 <p>

<a>

</a>

 </p>

<br>

</br>

</div>

我們知道div節點有兩個子節點，p和br，而p節點又有一個子節點a，具體處理過程簡單描述如下：

假設當前棧為空白；

首先處理<div>，遇到<div>時，調用processStartTag()，m_openElements中首先壓入div；

繼續處理，遇到<p>標籤，調用processStartTag()，此時棧頂的div就是p節點的父節點，建立好p和div的串連，在加入節點p；

繼續處理，遇到<a>標籤，調用processStartTag()，此時棧定節點是p，當前節點是a，那麼a的父節點是p，建立好父子關係，並將a壓入棧；

繼續處理，遇到</a>標籤，調用processEndTag()，彈出棧定元素a(代碼中使用“彈出直到標籤a”一提高容錯性，因為有可能會有沒封閉的節點，導致棧混亂，使用彈出知道標籤xxx，可以將沒有封閉的標籤帶來的問題，限制在局部範圍內，防止擴散)；

繼續處理，遇到</p>標籤，調用processEndTag()，彈出p

繼續處理，遇到<br>標籤，調用processStartTag()，此時棧頂的div就是br節點的父節點，建立好br和div的串連，在加入節點br；

繼續處理，遇到</br>標籤，調用processEndTag()，彈出br

繼續處理，遇到</div>標籤，調用processEndTag()，彈出div

DOM樹建立完畢。

原理雖然如此，但因為瀏覽器為了使用者的方便，允許網頁中有各種的錯誤，瀏覽器必須能夠儘可能的顯示出使用者的資料，這就給DOM樹的構建增加了很多複雜的處理，具體來說，DOM的數構建是由一個狀態機器來控制和容錯的，比如在processStartTag函數中，根據當前構建過程的狀態和獲得的HTML token來決定下一步的動作，構建過程的狀態包括：InitialMode, BeforeHTMLMode, BeforeHeadMode, InHeadMode, AfterHeadMode, InBodyMode, InTableMode,
InCapationMode, InColumnGroupMode,...等等，如何根據這些狀態和輸入的token執行動作，在參考文獻[1]中有全面的描述。經過這樣的過程Dom樹應就算建立完成了。

參考文獻：

[1]http://www.whatwg.org/specs/web-apps/current-work/multipage/tree-construction.html#parsing-main-inbody