浏览器都包含哪些进程？

知道了浏览器是多进程后，再来看看它到底包含哪些进程：（为了简化理解，仅列举主要进程）

1.Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有

负责浏览器界面显示，与用户交互。如前进，后退等
负责各个页面的管理，创建和销毁其他进程
将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
网络资源的管理，下载等

2.第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建

3.GPU进程：最多一个，用于3D绘制等

4.浏览器渲染进程（浏览器内核）（Renderer进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为:页面渲染，脚本执行，事件处理等

重点是浏览器内核（渲染进程）

在这里插入图片描述
1.GUI渲染线程

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

2.JS引擎线程

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

3.事件触发线程

归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

4.定时触发器线程

传说中的setInterval与setTimeout所在线程
浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。

5.异步http请求线程

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

JS引擎线程（例如：谷歌V8引擎）

在 JS 中，大部分的任务都是在主线程上执行，常见的任务有:

扫描二维码关注公众号，回复： 12897087 查看本文章

渲染事件
用户交互事件
js脚本执行
网络请求、文件读写完成事件等等。
如setTimeout/setInterval这样的定时器回调任务

为了让这些事件有条不紊地进行，JS引擎需要对之执行的顺序做一定的安排，V8 其实采用的是一种消息队列（即先进来的先执行）的方式来存储这些任务，并将这些待执行的事件添加到消息队列中，然后js主线程会不断地从消息队列中取出事件、执行事件。

模拟如下:
在这里插入图片描述

了解异步回调处理时机

下面重点围绕：异步http请求线程、定时触发器线程

定时触发器线程：

传说中的setInterval与setTimeout所在线程
浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。

例如：
在这里插入图片描述
异步http请求线程：

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

例如：
在这里插入图片描述

重点：事件循环机制（宏任务、微任务提出）

首先：

在 JS 中，大部分的任务都是在主线程上执行（JS引擎线程），常见的任务有:

渲染事件
用户交互事件
js脚本执行
网络请求、文件读写完成事件等等。
setTimeout/setInterval这样的定时器回调任务

此次：
在这里插入图片描述
微任务(MicroTask)引入: 引入微任务的初衷是为了解决异步回调的问题

对于每个宏任务而言，其内部都有一个微任务队列。那为什么要引入微任务？微任务在什么时候执行呢？
1.其实引入微任务的初衷是为了解决异步回调的问题。想一想，对于异步回调的处理，有多少种方式？总结起来有两点:
(1)将异步回调进行宏任务队列的入队操作。
(2)将异步回调放到当前宏任务的末尾。
2.如果采用第一种方式，那么执行回调的时机应该是在前面所有的宏任务完成之后，倘若现在的任务队列非常长，那么回调迟迟得不到执行，造成应用卡顿。
3.为了规避这样的问题，V8 引入了第二种方式，这就是微任务的解决方式。在每一个宏任务中定义一个微任务队列，当该宏任务执行完成，会检查其中的微任务队列，如果为空则直接执行下一个宏任务，如果不为空，则依次执行微任务，执行完成才去执行下一个宏任务。

常见的微任务有MutationObserver、Promise.then(或.reject) 以及以 Promise 为基础开发的其他技术(比如fetch API), 还包括 V8 的垃圾回收过程。

最后：

主线程、消息队列、调用栈等共同完成事件循环机制

调用栈：是一种数据结构，用来管理在主线程上执行的函数的调用关系
在执行一段代码时会将全局执行上下文压入调用栈中，并在执行上下文中创建一个空的微任务队列。

在这里插入图片描述

总结