浏览器的工作原理（一）

一、五个主流浏览器：Internet Explorer、Opera、 Firefox、 chrome浏览器 和 Safari，其中后面的三个是代码开源的浏览器，占据了将近60%的浏览器市场份额。浏览器厂商对规范的遵循并不完善，所以开发者面临严重的浏览器兼容问题。

二、各大浏览器之间有很多共同点，其中公共的界面元素有：

1. 1. 地址栏
   2. 前进，后退按钮
   3. 书签设置
   4. 刷新，停止按钮
   5. 主页按钮

三、浏览器的主要组件：

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

　　2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。

　　3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

　　4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

　　5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

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

　　7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

四、渲染引擎

Firefox、Chrome 和 Safari 是基于两种渲染引擎构建的，Firefox 使用 Geoko——Mozilla自主研发的渲染引擎，Safari 和 Chrome都使用webkit。

• 渲染引擎在取得内容之后的基本流程：

  解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

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

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

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

学习地址：http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/