Press "Enter" to skip to content

浏览器的结构

现代浏览器大都基于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 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

5 Comments

  1. […] 瀏覽器的運作基本遵照 HTTP,而一些瀏覽器也支援HTTPS、FTP,甚或更多的網路協議,例如IRC、WAP等等。以HTTP為例,瀏覽器將訊息傳給伺服器端後,再將其訊息以排版引擎呈現和組合。詳細的流程是,與伺服器交互→把HTML解析成DOM樹 →對DOM樹的可視元素,分配位置、高度、寬度→視覺化。這過程還得要加上Javascript以及CSS的影響,JavaScript Engine會解釋執行Javascript,以實現該語法所要的效果。排版引擎也會在視覺化前,視呼CSS的規範,呈現相應的顏色字型。此外瀏覽器還會 做幾件事,例如增刪改查Cookie文件、對各種控件兼容,包括AciiveX、Flash、JAVA Applet等、提供相應的安全驗證機制,比如SSL、電子證書(Digital Certificate)應用等等。詳細的說明以及圖解可以看瀏覽器的結構、瀏覽器結構分析、瀏覽器排版引擎模型、解釋一下各瀏覽器的內核,排版引擎 – Firefox完全手冊。 […]

  2. zhangyufeng
    zhangyufeng 2009-05-16

    在公司一直上不了你的博客……不知道为什么。

    • 雪候鸟
      雪候鸟 2009-05-18

      可能是网通和电信之间的问题…

  3. 雪候鸟
    雪候鸟 2009-05-15

    mark:另外对于常见的浏览器核心, gecko,webkit,mshtml(IE的那个), 回头好好研究研究..

  4. sychen
    sychen 2009-05-15

    了解,了解。

Leave a Reply

Your email address will not be published. Required fields are marked *