浏览器的线程参与情况

浏览器是多进程的：

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

• 负责浏览器界面显示，与用户交互。如前进，后退等
• 负责各个页面的管理，创建和销毁其他进程
• 网络资源的管理，下载等

2.第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
3. GPU进程：最多一个，用于3D绘制等
4. 浏览器内核（浏览器渲染进程），Renderer进程，内部是多线程的，也就是我们每个标签页所拥有的进程，互不影响，负责页面渲染，脚本执行，事件处理等

不了解线程的先去复习一下浏览器中线程与进程的关系。

浏览器内核（渲染进程）是多线程的：

在内核控制下各线程相互配合以保持同步，一个浏览器通常由以下常驻线程组成：

1. GUI渲染线程
   GUI渲染线程负责渲染浏览器界面HTML元素，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。当界面需要重绘(Repaint)或由于某种操作引发回流(重排)(reflow)时,该线程也会执行。
2. JS引擎线程
   JavaScript引擎，也可以称为JS内核，主要负责处理Javascript脚本程序，运行代码。例如V8引擎。
   JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序（单线程）。

由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JavaScript线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。因此为了防止渲染出现不可预期的结果，⚠️浏览器设置GUI渲染线程与JavaScript引擎为互斥的关系，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到引擎线程空闲时立即被执行。
如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
3. 事件触发线程
听起来像JS的执行,但是其实归属于浏览器，而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）。
当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中。
当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理

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

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

事件触发线程、定时触发器线程、异步HTTP请求线程三个线程有一个共同点，那就是使用回调函数的形式，当满足了特定的条件，这些回调函数会被执行。这些回调函数被浏览器内核理解成事件，在浏览器内核中拥有一个事件队列，这三个线程当满足了内部特定的条件，会将这些回调函数添加到事件队列中，等待JS引擎空闲执行。例如异步HTTP请求线程，线程如果检测到请求的状态变更，如果设置有回调函数，回调函数会被添加事件队列中，等待JS引擎空闲了执行。
但是，JS引擎对事件队列（宏任务）与JS引擎内的任务（微任务）执行存在着先后循序，当每执行完一个事件队列的事件，JS引擎会检测内部是否有未执行的任务，如果有，将会优先执行（微任务）。