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

浏览器主要结构 目前，常用的浏览器主要有：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）中,下面的几篇文章都会围绕这上面的结构图展开论述，欢迎大家持续关注~

本文章由javascript技术分享原创和收集