现代浏览器工作原理

五种主流浏览器：IE，Chrome，fireFox，chrome, safari和Opera。其他浏览器的内核都是这五种之一。

浏览器的主要构成：

1 .用户界面：浏览器界面的各个部分（包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分）

2. 浏览器引擎：用来查询和操作渲染引擎的接口

3. 渲染引擎：用来显示所请求的资源，负责解析HTML，CSS，并显示其结果。

4 .网络处理：负责完成网络调用，例如HTTP请求。发送网络请求，并接受响应。

5. UI 后端：用来绘制一写html基本组件，如输入框，选择框，input，select等。

6. JS解释器：用来执行JS代码。

7. 数据存储：属于持久层，用于保存类似COOKIE的各种数据（客户端存储数据），如HTML5中的web database。

其构成如下图：

                                      图1

浏览器渲染引擎分类：

IE：Trident，

firefox: gecko,

chrome和Safari： WebKit ，

opera: presto

浏览器JS引擎：

V8，webkit，carakan（opera），squirreFish,  squirreFish Extreme，chakara（ie9）

渲染引擎的基本流程

渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。

其基本流程如下：

解析HTML文件以构建DOM树-》构建render树-》布局render树-》绘制render树

              图2 渲染引擎基本流程

渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。

Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

                                图3 webkit主流程

                                        图4 gecko主流程

从图3和4中可以看出，尽管webkit和Gecko使用的术语稍有不同，他们的主要流程基本相同。Gecko称可见的格式化元素组成的树为frame树，每个元素都是一个frame，webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局，而Gecko中称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment，Gecko在html和dom树之间附加了一层，这层称为内容接收器，相当制造dom元素的工厂。

相关链接 http://blog.jobbole.com/12749/