现代浏览器大都基于XML中的DOM规范来建立，而且DOM规范提供了对ECMAScript的绑定，可以方便的用来实现javascript。下面这副图是WinRiver公司采用Java开发的ICEStorm的RenderEngine的框架图，你可以在http://www.icesoft.no/architecture.html#storm看到这个图表。这个模型基本上也是所有现代浏览器通用的一个模型了。我们在Konqueror中同样可以看到类似的构造。

结构图:
                                    JS Engine
                                       |
                               ECMAScript Binding
                                       |
Stream->Tokenizer/Parser->DOM Builder->DOM->Layout Engine->Rendering out
                        |                  |
		     HTML Validator     	      CSS
                                           |
                                       CSS Parser 

DOM是浏览器的核心，DOM（Document Object Model）规范定义了一个XML文档的文档结构模型，它是一套语言无关的接口，由IDL定义。通过DOM API你可以遍历、修改文档。DOM分为DOM Core和DOM HTML，DOM Core是DOM的核心部分，它定义了一系列最基本的接口，利用这些接口程序可以访问和维护已经解析过的XML和HTML文档。DOM HTML定义了HTML的高级接口，并和DOM Core中的有继承关系。总之，通过DOM我们可以把一个HTML文档组织起来，并通过DOM API对文档进行操作。DOM在逻辑上是一种树状的结构，可以通过任何一种数据机构予以实现。

比如 hello

对应的DOM树就是：

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

（Document是这个树的根结点）

而这棵DOM树需要进行分词和解析网络上读取的HTML字符数据流。

而且DOM提供了和ECAMScript的绑定，就是提供了ECMAScript要求的Host。ECMAScript是一个工业标准，Netscape的javascript和MS的JScript都符合这个标准，实际上这个标准就是从它们那里来的。我们在HTML文本中定义的javascript，需要解释执行，这些工作由JSEngine来完成。比如我们执行window.alert(”hello!”)，window这个不是ECMAScript内建的，你需要实现这样一个Host，把它的属性和方法告诉给JSEngine，它在解释执行时就会自动调用你实现中的相应的方法。ECMAScript相关的概念有很多，你可以去看看它的规范。JSEngine可以看看Mozilla.org/js中的部分。

DOM树最后需要显示在你的屏幕上，这时候你需要通过一个Layout算法进行排版输出。CSS规定了一些输出的特性，包括颜色字体等等。CSS需要独立的Parser来进行解析。CSS是DOM规范中的一部分。

对于浏览器的开发者来说，你要实现DOM API、DOM ECMAScript Binding、JSEngine、LayoutEngine，当然有的部分你可以使用已有的成果。

原文地址: http://azi.javaeye.com/blog/177298

建议继续学习：

1. 浏览器的工作原理：新式网络浏览器幕后揭秘    (阅读：19550)
2. 浅析http协议、cookies和session机制、浏览器缓存    (阅读：15800)
3. 从输入 URL 到页面加载完成的过程中都发生了什么事情？    (阅读：14502)
4. 解剖CPU    (阅读：8024)
5. 程序员眼里IE浏览器是什么样的    (阅读：6851)
6. 浏览器的渲染原理简介    (阅读：6389)
7. 各种浏览器审查、监听http头工具介绍    (阅读：6250)
8. 图说浏览器战争：火狐、微软、谷歌那些事    (阅读：6080)
9. 浏览器缓存机制    (阅读：5773)
10. [译]Google Chrome中的高性能网络    (阅读：5128)