现代浏览器结构
graph TD;
浏览器-->用户界面 & 浏览器引擎 & 渲染引擎/浏览器内核 & JS解释器 & 网络部分 & 后端用户界面 & 数据存储
用户界面
主要提供用户与浏览器引擎交互的方法。其中包括：
- 地址栏
- 向前/退后按钮
- 书签菜单等等
浏览器除了渲染请求页面的窗口外的所有地方都属于用户界面（除了从服务器请求到的网页窗口）
浏览器引擎
协调（主控）UI和渲染引擎，在他们之间传输指令。 提供对渲染引擎的高级接口：
一方面它提供初始化加载Url和其他高级的浏览器动作（如刷新、向前、退后等）方法。
另一方面Browser Engine也为User Interface提供各种与错误、加载进度相关的消息。
用于在用户界面和渲染引擎之间传递数据;(用来查询及操作渲染引擎的接口)
渲染引擎
为给定的URL提供可视化的展示。它解析JavaScript、Html、Xml，并且User Interface中展示的layout。
其中关键的组件是Html解析器，它可以让渲染引擎展示差乱的Html页面。
值得注意：不同的浏览器使用不同的Rendering Engine。例如：IE使用Trident，Firefox使用Gecko，Safai使用Webkit。Chrome和Opera使用Webkit（以前是Blink）
渲染引擎主要用来请求网络页面资源解析排版后呈现给用户；渲染用户请求页面内容(从服务器请求到的网页窗口);
用户请求页面内容：请求的html内容（包括样式，图片，js）
JavaScript 解释器
解释和运行网站上的js代码，得到的结果传输到渲染引擎来展示。
用来解释执行JS代码；是浏览器解释和执行JavaScript脚本的部分，例如V8引擎；
网络
基于互联网HTTP和FTP协议，处理网络请求。网络模块负责互联网通信与安全，字符集翻译和MIME类型解析。另外网络模块还提供获得到文档的缓存，以减少网络传输。为所有平台提供底层网络实现，其提供的接口与平台无关
负责网络请求,主要是来完成网络调用，是浏览器开启网络线程发送请求或下载资源文件的模块，例如DOM树中请求静态资源首先是通过浏览器的网络模块发起的；
用户界面后端
用于绘制基本的窗口小部件，比如组合框和窗口。而在底层使用操作系统的用户界面方法，并公开与平台无关的接口。
用于绘制基本的浏览器窗口内控件，比如组合选择框、按钮、输入框等；
数据存储
管理用户数据，例如书签、cookie和偏好设置等。
涉及cookie、localstorage等客户端存储技术，可以通过浏览器引擎提供的API进行调用。
常见的浏览器内核
浏览器内核主要分为两部分：渲染引擎和 JS引擎;最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
单内核
| 名称 | 内核 | 公司 |
|---|---|---|
| IE | Trident | IE是微软公司旗下浏览器 |
| Edge | Blink | 微软 |
| Chrome | 原为webkit，现为Blink | Chrome浏览器是google旗下的浏览器 |
| Firefox | Gecko | Firefox浏览器使Mozilla公司旗下浏览器 |
| opera（欧朋） | 原为Presto，现为Blink | Opera是挪威Opera Software ASA公司旗下的浏览器 |
| safari | 原为webkit，现为Blink | 苹果公司发布的Safari浏览器 |
双内核
五大浏览器采用的都是单内核，而随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核
| 名称 | 内核 |
|---|---|
| 360浏览器、猎豹浏览器 | IE+Chrome双内核 |
| 搜狗、遨游、QQ浏览器 | Trident（兼容模式）+Webkit（高速模式) |
| 百度浏览器、世界之窗 | IE内核 |
| 2345浏览器内核 | 以前是IE内核，现在也是IE+Chrome双内核 |
| UC | U3引擎 |
| QQ和微信 | X5引擎，16年开始使用Blink引擎； |
最后一句
学习心得！若有不正，还望斧正。希望掘友们不要吝啬对我的建议。
