浏览器引擎

原地址：http://wenku.baidu.com/view/67fa6feaaeaad1f346933f28.html

简介

现在浏览器的内核引擎，基本上是三分天下：

Trident: IE 以Trident 作为内核引擎。

Gecko: Firefox 是基于 Gecko 开发。

WebKit: Safari, Google Chrome 基于 Webkit 开发。

还有一个Presto：Opera,任天堂DS浏览器，发展也良好。

WebKit 内核在手机上的应用十分广泛，例如 Google 的手机Gphone、 Apple 的 iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。

 WebKit组成

WebKit 主要包括三个部分WebCore、JavascriptCore 及Ports部分。WebKit 专注的核心部分主要是：分析Html,Javascript 的解析和布局渲染技术。分别在由WebCore/html，JavascriptCore 和WebCore/rendering来完成。

体系结构图如下：

 

工作流程

 

流程解析： 1. 用户向Shell发出页面请求后，页面的URL 或本地文件名被发送到Shell；

2. Shell 调用IO组件，把URL 传达到IO组件；

3. IO组件使用HTTP 协议或再调用本地IO获取HTML/XHTML源数据，返回Shell；

4. Shell 把IO 返回的HTML/XHTML source 提交HTML/XHTML分析器；

5. HTML/XHTML分析器分析HTML/XHTML代码，构建一棵DOM 树，树根为HTMLDocument;

6. 通过DOM 树，生成Render 树。 Render树，简单的说来，它是对DOM 树更进一步的描述，其描述的内容主要与布局渲染等CSS相关属性如left、 top、width、height、color、font等有关，因为不同的DOM 树结点可能会有不同的布局渲染属性，甚至布局时会按照标准动态生成一些 匿名节点，所以为了更加方便的描述布局及渲染，WebKit内核又生成一颗Render 树来描述DOM 树的布局渲染等特性，当然DOM 树与Render 树 不是一一对应，但可以相互关联；

7. 布局管理器layout对应控件。当布局管理器对可视化元素指派好位置和大小后，可视化元素必须要严格遵守布局管理器给它分配的位置和大小，不能擅自更改，相应控件根据自己的属性进行表现自己了，如背景，外形等。

 

处理流程

流程描述： 通过向服务器发送请求服务器通过请求，发给客户端html的内容浏览器通过W3C 规范，把接受到的内容解析成DOM 树，在解析DOM 树的同时会生成对应的Render 树。布局管理器通过Render 树，开始布局。这个是一个动态的过程，DOM在这个时候会继续向服务器申请自己需要的东西， 比如CSS,JavaScript，图片等，然后布局器动态的加载或布局，这样可以改善用户的体验，最后把整个网页render出来。

 

原理分析

算法分析