当前位置：首页>前端>正文

JavaScript Event Loop事件循环机制

前端2024-10-23 05:25:52

背景

几年前接触到了Event Loop大致了解了它的原理，最近又发看了一些相关资料，有了更深层次的理解，在这里记录一下。

浏览器

浏览器内核工作时主要的线程包括：

JS执行引擎线程
GUI页面渲染线程
计时器触发线程
事件监听线程
异步http网络请求线程。

JavaScript单线程原因

JS引擎是单线程，因为作为浏览器脚本语言，它的主要任务是：

嵌入动态文本于HTML页面
对浏览器事件做出响应
读写HTML元素
在数据被提交到服务器之前验证数据
检测访客的浏览器信息
控制cookies，包括创建和修改
基于Node.js技术进行服务器端编程

假如多线程的话会带来相当复杂的同步问题，例如：（两个线程一个appendChild了一个div，另外一个却在removeChild这个div，或者浏览器在运行一个复杂的图像算法时，调用堆栈有方法需要执行，就会被阻塞，无法执行其他任何代码）。单线程控制GUI在大多数GUI编程中也是普遍现象，JavaSpript是Netscape公司在1995年首次运用在浏览器页面上，早期设计成单线程也是顺理成章的。这里以Process-per-site-instance这种浏览器默认的进程模式展开。

主体内容

JavaScript 有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。
下图就是对这个模型的一个描述，

EventLoop.jpg

可以看到堆(FILO先进后出)、栈(FIFO先进后出)和队列，其中函数调用栈用来处理函数的执行顺序，任务队列则来处理其他代码的执行（如执行栈清空后执行的异步代码），有点类似于操作系统的进程调度，js在执行时也是将任务分为同步任务和异步任务，首先，同步任务在主线程上排队并依次执行形成一个执行栈(execution contexts)，接着异步任务则进入任务队列（即上图的Queue），任务队列(task queue)又被分为(Macro-Task和Micro-Task)。

macro-task（宏任务）包括：

script(整体代码)
setTimeout
setInterval
setImmediate
requestAnimationFrame
I/O
UI rendering

micro-task（微任务）包括：

Promise.then catch finally
process.nextTick
MutationObserver

代码示例

setTimeout(function () {
  console.log('【宏任务setTimeout1执行】macro_setTimeout_1');
}, 1000)

new Promise(function (resolve) {
  console.log('【script执行】global_promise');
  resolve();
}).then(function() {
  console.log('【微任务promise .then执行】micro_then');
})

process.nextTick(function() {
  console.log('【微任务nextTick执行】micro_nextTick');
})

setTimeout(function () {
  console.log('【宏任务setTimeout2执行】macro_setTimeout_1');
}, 0)

执行结果如下：