「一」浏览器的主要结构【必看!】

浏览器主要结构

目前，常用的浏览器主要有：Chrome、IE（Edge）、Safari、Firefox等。不同的浏览器在结构方面虽然有所差异，但是整体的设计理念是相似的。因此，可以抽象得到如下图所示的参考结构：

image.png

组成

1. 用户界面（User Interface）

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

2. 浏览器引擎（Browser Engine）

用来查询及操作渲染引擎的接口
浏览器引擎可以加载一个给定的URI，并支持诸如：前进/后退/重新加载等浏览操作。
浏览器引擎提供查看浏览会话的各个方面的挂钩，例如：当前页面加载进度、JavaScript alert。
浏览器引擎还允许查询/修改渲染引擎设置。

3. 渲染引擎 （Rendering Engine）

渲染引擎能够显示HTML和XML文档，可选择CSS样式，以及嵌入式内容（如图片）。
渲染引擎能够准确计算页面布局，可使用“回流”算法逐步调整页面元素的位置。
渲染引擎内部包含HTML解析器。

4. 网络（Networking）

网络系统实现HTTP和FTP等文件传输协议。
网络系统可以在不同的字符集之间进行转换，为文件解析MIME媒体类型。
网络系统可以实现最近检索资源的缓存功能

5.XML解析器（XML Parser）

XML解析器可以将XML文档解析成文档对象模型（Document Object Model，DOM）树。
XML解析器是浏览器架构中复用最多的子系统之一，几乎所有的浏览器实现都利用现有的XML解析器，而不是从头开始创建自己的XML解析器。

6. JS解释器（JavaScript Interpreter）

JavaScript解释器能够解释并执行嵌入在网页中的JavaScript（又称ECMAScript）代码。

7.显示后端 （Display Backend）

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

8. 数据持久层 （Data Persistence）

数据持久层将与浏览会话相关联的各种数据存储在硬盘上。
这些数据可能是诸如：书签、工具栏设置等这样的高级数据，也可能是诸如：Cookie，安全证书、缓存等这样的低级数据。

内核

浏览器内核分成两部分：渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎，负责请求网络页面资源加以解析排版并呈现给用户

默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式

【渲染引擎】

浏览器	渲染引擎
firefox	gecko
IE、Edge	Trident
chrome\safari\opera	webkit（13年chrome和opera开始使用Blink引擎）
QQ浏览器和微信内核	X5（16年开始使用Blink引擎）
UC	U3引擎

【js引擎】

浏览器	js引擎
chrome	V8引擎
firefox	monkey系列
Opera	Carakan引擎
safari	SquirrelFish系列引擎
老版本IE	Jscript引擎 （IE9之后使用Chakra引擎）

上面的内容只是简单介绍下浏览器的主要结构，通过图可以看出重头戏在渲染引擎（rendering engine）中,下面的几篇文章都会围绕这上面的结构图展开论述，欢迎大家持续关注~