任务队列
异步
非阻塞
浏览器需要事件循环来协调事件、用户操作、脚本执行、渲染、网络请求等。通过事件循环,浏览器可以利用任务队列来管理任务,让异步事件非阻塞地执行。每个客户端对应的事件循环是相对独立的。
在计算机中,Event Loop 是一个程序结构,用于等待和发送消息和事件。 —— 维基百科
Event Loop 可以理解为一个消息分发器,通过接收和分发不同类型的消息,让执行程序的事件调度更加合理。
浏览器事件循环是以浏览器为宿主环境实现的事件调度,操作顺序如下:
下图展示了这个过程:
图片来源 JS CONF EU 2014
由于 JavaScript 是单线程的,且 JavaScript 主线程和渲染线程互斥,如果异步操作(如上图提到的 WebAPIs)阻塞 JavaScript 的执行,会造成浏览器假死。而事件循环为浏览器引入了任务队列(task queue),使得异步任务可以非阻塞地进行。
浏览器事件循环在处理异步任务时不会一直等待其返回结果,而是将这个事件挂起,继续执行栈中的其他任务。当异步事件返回结果,将它放到任务队列中,被放入任务队列不会立刻执行回调,而是等待当前执行栈中所有任务都执行完毕,主线程处于空闲状态,主线程会去查找任务队列中是否有任务,如果有,取出排在第一位的事件,并把这个事件对应的回调放到执行栈中,执行其中的同步代码。
异步任务被分为两类:宏任务(macrotask)与微任务(microtask),两者的执行优先级也有所区别。
宏任务主要包含:script(整体代码)、setTimeout、setInterval、setImmediate、I/O、UI 交互事件。
微任务主要包含:Promise、MutationObserver 等。
在当前执行栈为空的时候,主线程会查看微任务队列是否有事件存在。如果不存在,那么再去宏任务队列中取出一个事件并把对应的回调加入当前执行栈;如果存在,则会依次执行队列中事件对应的回调,直到微任务队列为空,然后去宏任务队列中取出最前面的一个事件,把对应的回调加入当前执行栈。如此反复,进入循环。下面通过一个具体的例子来进行分析:
Promise.resolve().then(() => {
// 微任务1 console.log("Promise1"); setTimeout(() => { // 宏任务2 console.log("setTimeout2"); }, 0);});
setTimeout(() => {
// 宏任务1 console.log("setTimeout1"); Promise.resolve().then(() => { // 微任务2 console.log("Promise2"); });}, 0);
Copy
最后输出顺序为:Promise1 => setTimeout1 => Promise2 => setTimeout2
。具体流程如下:
在 Node.js 中,事件循环表现出的状态与浏览器中大致相同。不同的是 Node.js 中有一套自己的模型。 Node.js 中事件循环的实现是依靠的 libuv 引擎。下图简要介绍了事件循环操作顺序:
图片来源 Node.js 官网
在每次运行的事件循环之间,Node.js 检查它是否在等待任何异步 I/O 或计时器,如果没有的话,则完全关闭。
需要注意的是,宏任务与微任务的执行顺序在 Node.js 的不同版本中表现也有所不同。同样通过一个具体的例子来分析:
setTimeout(() => {
console.log("timer1"); Promise.resolve().then(function () { console.log("promise1"); });}, 0);
setTimeout(() => {
console.log("timer2"); Promise.resolve().then(function () { console.log("promise2"); });}, 0);
Copy
timer1 => promise1 => timer2 => promise2
。timer1 => promise1 => timer2 => promise2
。timer1 => timer2 => promise1 => promise2
。本站文章用于学习交流
新浪微博 | QQ群1:161644793qq | QQ群2:98711210
网站地图 | 网站统计
Copyright 2011 - 2021 paocode.com All Rights Reversed. 浙ICP备19041980号
瞎猫内容中心