浏览器的工作原理-介绍篇

web浏览器使我们最常用的软件，尤其是作为一名前端从业人员，更应该了解浏览器的工作原理。在该系列篇章中我将为大家剖析浏览器的工作原理，探究一下当你在地址栏输入‘Google.com’到出现Google页面发生了什么。如果是对浏览器的内部原理感兴趣的可以一起学习下。
在日常工作和生活中我们主要使用5类浏览器，IE、Firefox、Safari、chrome以及opera。这些浏览器的主要功能就是通过向服务器端发起请求然后将我们所希望得到的内容展示在浏览器的窗口中。这些内容通常都是以HTML、PDF、图像或其他方式来呈现且都是以URL（统一资源定位器）来指定内容资源所在位置，尤其是在网络对话中。
数年来，各大浏览器在遵守一些由W3C指定的共同规范的同时也实现了很多自身特点的扩展，这对web开发者也带来了一些兼容性的问题。但在各大浏览器的交互界面中有很多东西是相同的，例如：
1、输入URL的地址栏
2、后退和前进的按钮
3、书签选项卡
4、用于刷新和停止下载当前文档的刷新和停止按钮
5、可返回主页面的主页按钮
非常奇怪，并没有谁去指定浏览器的交互界面必须要具备什么要素，之所以会出现这种共同性是由各大浏览器在长期的用户使用实践经验和相互模仿而导致的。

浏览器的高层级结构窥探
浏览器的主要组成部分有：
1、用户界面-包括地址栏、后退/前进按钮、书签菜单等等。除了主窗口的页面内容其他部分均属于用户界面
2、浏览器引擎-查询和管理渲染引擎的接口
3、渲染引擎-用于展示页面内容，例如如果所需内容是HTML文件，那么渲染引擎会负责解析HTML和CSS，并将内容按照指定样式进行展现
4、网络-这一部分用于网络通话，例如发起http请求。它拥有独立于平台的接口且平台执行的下层。
5、后台UI-用于描绘一些诸如多个模块或窗口组合的基本组件，它暴露出一个通用的跨平台的接口，在该接口之下调用操作系统的接口方法。
6、JavaScript 编译器-用于编译和执行JavaScript代码
7、数据存储-这是一个固定层，浏览器需要保存位于硬盘上的所有类型的数据，如cookies，HTML5在浏览器中定义了一个虽然轻量级但相当完备的web数据库
具体浏览器构造如下图所示

必须注意的是chrome并不像大多数浏览器，它拥有多种类型的渲染引擎，每一种引擎都对应着一个tab，而每个tab都是一个独立的进程。
以后我会对每个组成部分都花一篇博文专门进行分析。