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

7 Comments

  1. ทางเข้า pg
    ทางเข้า pg August 16, 2022

    Today’s online gaming has a new format that has developed a game system that generates income ทางเข้า pg Het is een online spel dat gemakkelijk toegankelijk is, niet moeilijk om te spelen, en gespeeld kan worden door iedereen die geld wil verdienen

  2. Drama Cool
    Drama Cool November 17, 2021

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

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

  4. zhangyufeng
    zhangyufeng May 16, 2009

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

    • 雪候鸟
      雪候鸟 May 18, 2009

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

  5. 雪候鸟
    雪候鸟 May 15, 2009

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

  6. sychen
    sychen May 15, 2009

    了解,了解。

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.