浏览器的结构
现代浏览器大都基于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
建议继续学习:
- 浏览器的工作原理:新式网络浏览器幕后揭秘 (阅读:19513)
- 浅析http协议、cookies和session机制、浏览器缓存 (阅读:15758)
- 从输入 URL 到页面加载完成的过程中都发生了什么事情? (阅读:14461)
- 解剖CPU (阅读:8012)
- 程序员眼里IE浏览器是什么样的 (阅读:6819)
- 浏览器的渲染原理简介 (阅读:6363)
- 各种浏览器审查、监听http头工具介绍 (阅读:6214)
- 图说浏览器战争:火狐、微软、谷歌那些事 (阅读:6048)
- 浏览器缓存机制 (阅读:5754)
- [译]Google Chrome中的高性能网络 (阅读:5094)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:雪候鸟 来源: 风雪之隅
- 标签: 浏览器 结构
- 发布时间:2009-10-29 13:52:37
- [67] Go Reflect 性能
- [67] Oracle MTS模式下 进程地址与会话信
- [67] 如何拿下简短的域名
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [60] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [47] 界面设计速成