从浏览器多进程到JS单线程学习笔记

一、带着问题做看客

1、为什么说浏览器是多进程，有哪些进程呢？这些进程都是做什么的？

2、为什么说浏览器内核是多线程，有哪些线程呢？这些线程都是做什么的？

3、JS单线程是什么呢？

4、JS运行机制是什么呢？

二、进程和线程的区别

进程	线程
进程好比一个工厂，有独立资源（系统分配的内存）	线程好比工厂中的工人
工厂（进程）之间是相互独立	多个工人（线程）可以合作完成任务
工厂（进程）内有一个或者多个工人（线程）	工人（线程）之间共享空间、资源

注：

• 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
• 线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

三、浏览器多进程

基本准则：

• 浏览器是多进程的
• 浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu、内存）
• 简单点理解，每打开一个Tab页，就相当于创建了一个独立的浏览器进程。

浏览器进程分类：

进程	描述	作用
Browser进程	浏览器主进程，负责协调和主控	1、负责浏览器界面显示，与用户交互。如前进，后退等； 2、负责各个页面的管理，创建和销毁其他进程； 3、将Renderer进程得到的内存中的Bitmap（位图），绘制到用户界面上； 4、网络资源的管理，下载等
GPU进程	绘制3D等，只能有1个	图形、视频的渲染
浏览器渲染进程（Renderer进程）	默认每个tab页有1个进程，是多线程	1、页面渲染， 2、脚本执行， 3、事件处理

四、浏览器渲染进程的多线程

线程名称	作用	备注
GUI渲染线程	负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等	1、当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行； 2、GUI渲染线程与JS引擎线程是互斥的，当GUI线程渲染时JS引擎线程会被挂起。
JS引擎线程（JS内核）	负责处理Javascript脚本程序，包括解析Javascript脚本，运行代码	GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
定时触发器线程	setInterval与setTimeout所在线程，	1、计时完毕后，添加到事件队列中，等待JS引擎空闲后执行； 2、W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。
异步http请求线程	在XMLHttpRequest在连接后是通过浏览器新开一个线程请求	将检测到XMLHttpRequest状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。
事件触发线程	负责控制事件循环，当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。	当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中。这些待处理队列中的事件都得排队等待JS引擎空闲时处理。

五、浏览器进程之间通信过程（简化后的）

1、Browser进程收到用户请求，首先需要获取页面内容（如通过网络下载资源），随后将该任务通过RendererHost接口传递给Render进程；

2、Renderer进程的Renderer接口收到消息，简单处理后，交给渲染线程开始渲染：

【1】渲染线程接收请求，加载网页并渲染网页，这其中可能需要Browser进程获取资源和需要GPU进程来帮助渲染；

【2】可能会有js线程操作DOM；

【3】最后Render进程将结果传给Browser进程；

3、Browser进程接收到结果并将结果（Renderer进程得到的内存中的Bitmap）绘制出来；