事件轮询机制理解

进程与线程

首先简单了解下进程和线程的概念

• 进程：cpu资源分配的最小的单位，是拥有资源和独立运行的最小单位，程序执行时，会创建一个进程，cpu为其分配资源，并加入进程就绪队列。
• 线程：cpu调度的最小单位，是程序执行的最小单位。

进程与线程的关系：线程是在进程的基础上建立一次程序运行单位，一个进程可以有多个线程。进程相当于工厂，线程相当于工人，各进程间相互独立，同个进程中的线程共享其中的资源。

浏览器是多进程的，浏览器的进程包括：

• Browser进程 ，浏览器的主控线程，只有一个，负责浏览器界面显示，与用户交互，管理各个页签和其他进程网络资源。
• 第三方插件进程 ，插件打开时创建一个进程。
• GPU进程 ，最多一个，用于3D绘制。
• 浏览器渲染进程（浏览器内核或Renderer进程） 一个页签打开就是一个进程，多个空白页签合并为一个进程。

其中，浏览器渲染进程又有以下线程：

• js引擎线程，js内核，解析处理JavaScript脚本，运行代码，一个页签只有一个。
• 图形用户界面GUI渲染线程，用于解析HTML、css，构建DOM树和RenderObject树，布局，绘制。当界面需要重绘或者某种操作引发回流时执行。与js引擎线程互斥，在js引擎线程执行时GUI被挂起并保存到队列中，直到js引擎线程空闲时立即执行,防止渲染前后数据不一致，因此若js引擎执行时间过长，会导致页面渲染加载阻塞。
• 事件触发线程，属于浏览器而不是js引擎，用于处理事件循环。当鼠标点击、异步请求或执行setTimeout的代码块时，将对应任务添加到事件线程中，等待js引擎空闲时处理。
• 定时触发器线程，setInterval与setTimeout所在线程，用于计数，计数完成后将任务添加到事件触发线程中，因此记完数后并非立刻执行任务，这个数只是最小的延时时间，若js引擎未空闲需要继续等待。W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。
• 异步http请求线程 ，在XMLHTTPRequest连接后通过浏览器开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

对于非常耗时的工作会导致js执行过长时间而阻塞页面，可以使用Web Worker 向浏览器申请开一个子线程。

Web Worker ：在构造时接受一个JavaScript文件的url（包含要在worker中运行的代码），它运行在与当前windows不同的另一个全局上下文中，该线程属于浏览器，不操作dom，只负责计算。主线程与worker通过postMessage相互通信。

前面铺垫这么多，是为了能更好地理解事件轮询机制。

事件轮询

事件轮询（Event Loop）：一个程序结构，用来等待和发送消息和事件。由于JavaScript是单线程语言，用来协调事件（event），用户交互（user interaction），脚本（script），渲染（rendering），网络（networking）等。事件循环又分为两种，一种针对浏览上下文（browsing context），另一种针对worker（web worker）。

• js的任务分为同步任务和异步任务，异步任务必须指定回调函数。主线程执行同步任务，只负责读取和执行，形成一个执行栈，事件触发线程则管理一个任务队列（也可以说消息队列）。
• 当主线程的执行栈调用某些api，如鼠标点击、ajax请求、setTimeOut时，在各自线程处理完毕后才将事件添加到队列中。
• 当执行栈执行完，会读取任务队列中最先的事件，并将对应的回调函数加入执行栈，执行完再去调取，如此反复。若队列的代码中存在其他异步任务，则不会排在当前的任务队列之后，属于另一个事件循环。

图片来自详解事件循环与任务队列

任务优先级

一个事件循环是可以有多个任务队列的，每个任务都有一个任务源，相同任务源的任务只能在一个任务队列中，一个任务队列的执行顺序是先进先出，多个任务队列有优先级，但根据宿主环境的不同，优先级也不同，不能保证固定。

es6标准中，任务又分为两种类型，宏任务（macrotask）和微任务（microtask）。

• 宏任务：由宿主环境提供，比如setTimeout、setInterval、网络请求、用户I/O、script（整体代码）、UI rendering、setImmediate（node）。
• 微任务：语言标准（ECMAScript）提供，如process.nextTick(node)、Promise、Object.observe、MutationObserver。

在polyfill版本中Promise是通过setTimeout模拟实现的，则属于macrotask

根据任务分类，又将任务队列分为宏观任务队列（microtask queue）和微观任务队列（microtask queue）。任务队列的读取顺序是先读取所有微观任务队列执行后再读取一个宏观任务队列，再读取所有微观任务队列，再读取一个宏观任务队列…

图片来自详解事件循环与任务队列

参考文章：
事件轮询(Event Loop)
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
并发模型与事件循环
JavaScript：彻底理解同步、异步和事件循环(Event Loop)
详解事件循环与任务队列
JavaScript 运行机制详解：再谈Event Loop
什么是浏览器的事件循环（Event Loop）？