浏览器工作原理的一个栗子

群里讨论到了“如何降低脚本结构复杂度，合理设计结构”
有大神简单举了个栗子
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