瀏覽器工做原理的一個栗子

羣裏討論到了「如何下降腳本結構複雜度，合理設計結構」
有大神簡單舉了個栗子
hello 對應的DOM樹 以下

Document
                     |
                    HTML
                    /  \
                Head   body
                  |      |
               title textNode("hello")
                  |
           textNode("hello")

Document是這個樹的根結點
DOM樹須要進行分詞和解析網絡上讀取的HTML字符數據流
DOM提供了和ECAMScript的綁定 須要提供host
如執行window.alert(」hello!」)
window這個不是ECMAScript內建的
須要實現這樣的一個host
它在解釋執行時就會自動調用你實現中的相應的方法
DOM樹最後須要呈如今屏幕上
這時候須要layout算法 進行排版輸出
這就用到了CSS部分
CSS須要獨立的Parser來進行解析
CSS也是DOM規範中的一部分
你能夠根據本身的理解把他融合在複雜的結構體內

推薦你們看以下內容（須要耐心哦~）
瀏覽器的工做原理：現代網絡瀏覽器幕後揭祕
http://blog.sina.com.cn/s/blog_6deafdb2010146bt.html#Parsing_general