JS事件循环(Event Loop)

秋甜正果
208 阅读8分钟

什么是事件循环

JS分为同步任务和异步任务。同步任务都在主线程(这里的主线程就是JS引擎线程)上执行，会形成一个执行栈。

主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放一个事件回调。一旦执行栈中的所有同步任务执行完毕(也就是JS引擎线程空闲了)，系统就会读取任务队列，将可运行的异步任务(任务队列中的事件回调，只要任务队列中有事件回调，就说明可以执行)添加到执行栈中，开始执行

我们来看一段简单的代码：

let setTimeoutCallBack = function() {
    console.log('');
};

let httpCallback = function() {
    console.log('http');
}

console.log('1');

setTimeout(setTimeoutCallBack,1000);

// http
ajax.get('/info',httpCallback);

console.log('2');

以上代码的执行过程：

  1. JS是按照顺序从上往下依次执行的，可以先理解为这段代码时的执行环境就是主线程，也就是也就是当前执行栈；
  2. 首先，执行 console.log('我是同步任务1') ；
  3. 接着，执行到 setTimeout 时，会移交给定时器线程，通知定时器线程 1s 后将 setTimeoutCallBack 这个回调交给事件触发线程处理，在 1s 后事件触发线程会收到 setTimeoutCallBack 这个回调并把它加入到事件触发线程所管理的事件队列中等待执行；
  4. 接着，执行http请求，会移交给异步http请求线程发送网络请求，请求成功后将 httpCallback 这个回调交由事件触发线程处理，事件触发线程收到 httpCallback 这个回调后把它加入到事件触发线程所管理的事件队列中等待执行；
  5. 再接着执行 console.log('我是同步任务2') ；
  6. 至此主线程执行栈中执行完毕，JS引擎线程已经空闲，开始向事件触发线程发起询问，询问事件触发线程的事件队列中是否有需要执行的回调函数，如果有将事件队列中的回调事件加入执行栈中，开始执行回调，如果事件队列中没有回调，JS引擎线程会一直发起询问，直到有为止；

可以发现：

  1. 定时触发线程只管理定时器且只关注定时不关心结果，定时结束就把回调扔给事件触发线程；
  2. 异步http请求线程只管理http请求同样不关心结果，请求结束把回调扔给事件触发线程；
  3. 事件触发线程只关心异步回调入事件队列；
  4. JS引擎线程只会执行执行栈中的事件，执行栈中的代码执行完毕，就会读取事件队列中的事件并添加到执行栈中继续执行；
  5. 反复执行，就是我们所谓的事件循环(Event Loop)；

截屏2024-04-02 上午10.49.24.png

  1. 执行栈开始顺序执行；
  2. 判断是否为同步，异步则进入异步线程，最终事件回调给事件触发线程的任务队列等待执行，同步继续执行；
  3. 执行栈空，询问任务队列中是否有事件回调；
  4. 任务队列中有事件回调则把回调加入执行栈末尾继续从第一步开始执行；
  5. 任务队列中没有事件回调则不停发起询问；

宏任务&微任务

宏任务 -> GUI渲染 -> 宏任务 -> ... 复制代码

1. 宏任务( macrotask )

在ECMAScript中， macrotask 也被称为task。

我们可以将每次执行栈执行的代码当做是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)， 每一个宏任务会从头到尾执行完毕，不会执行其他。 由于JS引擎线程和GUI渲染线程是互斥的关系，浏览器为了能够使宏任务和DOM任务有序的进行，会在一个宏任务执行结果后，在下一个宏任务执行前，GUI渲染线程开始工作，对页面进行渲染：

宏任务 -> GUI -> 宏任务 -> 下一个宏任务 -> ...

常见的宏任务：

  1. 主代码块；
  2. setTimeout；
  3. setInterval；
  4. setImmediate () -Node；
  5. requestAnimationFrame () -浏览器

2. 微任务( microtask )

ES6新引入了Promise标准，同时浏览器实现上多了一个 microtask 微任务概念，在ECMAScript中， microtask 也被称为jobs。

我们已经知道宏任务结束后，会执行渲染(GUI)，然后执行下一个宏任务， 而微任务可以理解成在当前宏任务执行后立即执行的任务。

当一个宏任务执行完，会在渲染前，将执行期间所产生的所有微任务都执行完：

宏任务 -> 微任务 -> GUI -> 下一个宏任务 -> ...

常见微任务:

  1. process.nextTick () -Node；
  2. Promise.then()；
  3. catch；
  4. finally；
  5. Object.observe；
  6. MutationObserver；

3. 区分宏任务&微任务

打开新的空白窗口，在console中输入以下代码

window.open();

document.body.style = 'background:black';
document.body.style = 'background:red';
document.body.style = 'background:blue';
document.body.style = 'background:pink';

背景直接渲染了粉红色，根据上文里讲浏览器会先执行完一个宏任务，再执行当前执行栈的所有微任务，然后移交GUI渲染，上面四行代码均属于同一次宏任务，全部执行完才会执行渲染，渲染时GUI线程会将所有UI改动优化合并，所以视觉上，只会看到页面变成粉红色。

document.body.style = 'background:blue';

setTimeout(()=>{
    document.body.style = 'background:black'
},200)

页面会先卡一下蓝色，再变成黑色背景。之所以会卡一下蓝色，是因为以上代码属于两次宏任务，第一次宏任务执行的代码是将背景变成蓝色，然后触发渲染，将页面变成蓝色，再触发第二次宏任务将背景变成黑色。

document.body.style = 'background:blue'
console.log(1);

Promise.resolve().then(()=>{
    console.log(2);
    document.body.style = 'background:pink'
});
console.log(3);

输出 1 3 2 , 是因为 promise 对象的 then 方法的回调函数是异步执行，所以 2 最后输出

页面的背景色直接变成粉色，没有经过蓝色的阶段，是因为，我们在宏任务中将背景设置为蓝色，但在进行渲染前执行了微任务， 在微任务中将背景变成了粉色，然后才执行的渲染。

4. 注意点

  1. 浏览器会先执行一个宏任务，紧接着执行当前执行栈产生的微任务，再进行渲染，然后再执行下一个宏任务；
  2. 微任务和宏任务不在一个任务队列:
    1. 例如 setTimeout 是一个宏任务，它的事件回调在宏任务队列， Promise.then() 是一个微任务，它的事件回调在微任务队列，二者并不是一个任务队列；
    2. 以Chrome为例，有关渲染的都是在渲染进程中执行，渲染进程中的任务（DOM树构建，js解析…等等）需要主线程执行的任务都会在主线程中执行，而浏览器维护了一套事件循环机制，主线程上的任务都会放到消息队列中执行，主线程会循环消息队列，并从头部取出任务进行执行，如果执行过程中产生其他任务需要主线程执行的，渲染进程中的其他线程会把该任务塞入到消息队列的尾部，消息队列中的任务都是宏任务；
    3. 微任务是如何产生的呢？当执行到script脚本的时候，js引擎会为全局创建一个执行上下文，在该执行上下文中维护了一个微任务队列，当遇到微任务，就会把微任务回调放在微队列中，当所有的js代码执行完毕，在退出全局上下文之前引擎会去检查该队列，有回调就执行，没有就退出执行上下文，这也就是为什么微任务要早于宏任务，也是大家常说的，每个宏任务都有一个微任务队列（由于定时器是浏览器的API，所以定时器是宏任务，在js中遇到定时器会也是放入到浏览器的队列中);

截屏2024-04-02 上午11.02.32.png

  1. 首先执行一个宏任务，执行结束后判断是否存在微任务；
  2. 有微任务先执行所有的微任务，再渲染，没有微任务则直接渲染；
  3. 然后再接着执行下一个宏任务；

完整的Event Loop

截屏2024-04-02 上午11.03.43.png

  1. 整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为同步任务、异步任务两部分，同步任务会直接进入主线程依次执行，异步任务会再分为宏任务和微任务；

  2. 宏任务进入到 Event Table 中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到 Event Queue 中；

  3. 微任务也会进入到另一个 Event Table 中，并在里面注册回调函数，每当指定的事件完成时， Event Table 会将这个函数移到 Event Queue 中；

  4. 当主线程内的任务执行完毕，主线程为空时，会检查微任务的 Event Queue ，如果有任务，就全部执行，如果没有就执行下一个宏任务；

  5. 上述过程会不断重复，这就是Event Loop；

avatar
文章
阅读
粉丝