浏览器组成和多进程架构概念

浏览器的组成结构：

1. 用户界面-包括地址栏，后退/前进按钮，书签菜单等用户可操作的功能选项。

2. 浏览器引擎-用于查询和操作渲染引擎的界面。可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心。

3. 渲染引擎-负责显示请求的内容。它的功能是解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的页面，也有人称为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。

4. 网络-用于网络调用，是浏览器开启网络线程发送请求或下载资源文件的模块。例如DOM树解析过程中请求静态资源首先是通过浏览器中的网络模块发起的。

5. UI后端-用于绘制基本的浏览器窗口内控件，例如组合框、按钮、输入框等。它公开了不是平台特定的通用接口。它的下面使用操作系统的用户界面方法。

6. JavaScript解释器-用于解析和执行JavaScript代码，例如V8引擎。

7. 数据存储-这是一个持久层。浏览器需要将各种数据保存在硬盘上，例如cookie。新的HTML规范（HTML5）定义了“网络数据库”，它是浏览器中完整的数据库（尽管很轻）。它可以通过浏览器引擎提供的API进行调用。

浏览器进程：

• 浏览器主进程主要负责界面显示（前进、后退、各个界面管理）、用户交互、子进程管理（创建和销毁其他进程）和文件储存等功能。

• 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。

• 渲染进程的主要职责是把从网络下载的HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么Chrome会让渲染进程运行在安全沙箱里，就是为了保证系统的安全（需要特别注意的是，与大多数浏览器不同，Chrome拥有多个渲染引擎实例-每个选项卡一个。每个选项卡是一个单独的过程。）

• CPU进程：实现3D css,网页、谷歌UI绘制。

• 插件进程：负责插件运行，因插件容易崩溃，所以通过插件进程来隔离，以保证插件崩溃不会对浏览器和页面造成影响。如flash。

不同进程负责的浏览器区域示意图如下：

以上各进程之间的联系可以用一个很常见的问题去描述：那就是从输入URL到页面展示这中间发生了什么？

这里有一些进程线程的概念解释，以及上面这个问题的答案可做参考：https://zhuanlan.zhihu.com/p/47407398

 

我们主要需要了解的是浏览器的渲染引擎和灵活运用数据存储技术--因为这一部分我们在实际开发工作中使用最多，其他几个部分都是浏览器决定的，开发者控制的部分相对较少。

渲染引擎（浏览器内核、渲染进程，内部是多线程的）

1. GUI渲染线程：

• 负责渲染浏览器界面，解析HTML、CSS、构建DOM树和RenderObject树，布局和绘制等当界面需要重绘（Repaint）或由于 某种操作导致重排（Reflow）时，该线程就会执行。
• GUI渲染 线程和JS引擎线程是互斥的，当js引擎执行时GUI线程会被挂起（相当于冻结），GUI更新会被保存 在一个队列中等到js引擎空闲时立即执行。

2. JS引擎线程：

• 也称之为js内核，负责处理javascript脚本程序（V8引擎）。
• JS引擎线程负责解析javascript脚本，运 行代码JS引擎一直在等待着任务的到来，然后加以处理，一个renderer进程中无论如何都只有一个js 线程在运行js程序。
• 由于GUI渲染线程和JS引擎线程是互斥的，所以如果JS执行时间如果过长，这样 就会造成页面渲染不连贯，导致页面渲染加载阻塞。

3. 事件触发（请求）线程：

• 归属于浏览器而不是js引擎，用来控制事件循环。
• 当js引擎执行代码，如setTimeout时 （也可以是来自浏览器内核的其他线程，如鼠标点击，ajax请求等），会将对应的任务添加到事件线程 当中。
• 当对应的事件符合触发条件被触发时，事件线程会把事件添加到待处理任务队列的队尾，等待js 引擎的处理。
• 由于js的单线程关系，所以这些待处理队列中的事件都得排队等待js引擎处理（当js引擎 空闲时才会去执行）。

4. 定时器触发器线程：

• setInterval和setTimeout所在的线程。浏览器定时计数器并不是由js引擎计数的（因为js是单 线程的，如果处于阻塞状态就会影响计数的准确性）。
• 单独的线程来计时并触发定时（计时完毕后， 添加到任务队列中，等待js引擎空闲后执行）。
• W3C在HTML标准中规定，规定要求setTimeout中低 于4ms的时间间隔算为4ms。

5. 异步http请求线程：

• 在XMLHttpRequest在连接后通过浏览器开一个线程请求。
• 将检测到状态变更时，如果有设置 有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，再有js引擎执行。

总结了这些基础概念之后，在下一篇文章我会总结渲染流程的具体过程。

 

参考文章：

https://juejin.im/post/5bee2366e51d451fa238957c

http://taligarsiel.com/Projects/howbrowserswork1.htm#The_browsers_we_will_talk_about

参考书籍：现代前端技术解析