带你深入理解js事件循环机制-六虎

同步使命和异步使命（微使命和宏使命）

JavaScript是一门单线程言语

分为同步使命和异步使命

同步使命是指在主线程上排队履行的使命，只要前一个使命履行结束，才能持续履行下一个使命。

异步使命指的是，不进入主线程、而进入”使命行列”的使命；只要等主线程使命悉数履行结束，”使命行列”的使命才会进入主线程履行。

异步使命分为宏使命和微使命

new promise()、console.log()归于同步使命

宏使命（macrotask）	微使命（microtask）
谁发起的	宿主（Node、浏览器）	JS引擎
详细事情	1. script (能够了解为外层同步代码) 2. setTimeout/setInterval 3. UI rendering/UI事情 4. postMessage，MessageChannel 5. setImmediate，I/O（Node.js）	1. Promise 2. MutaionObserver 3. Object.observe（已抛弃；Proxy 目标代替） 4. process.nextTick（Node.js）
谁先运转	后运转	先运转
会触发新一轮Tick吗	会	不会

履行过程: 同步使命 —> 微使命 —> 宏使命

先履行一切同步使命，碰到异步使命放到使命行列中
同步使命履行结束，开端履行当时一切的异步使命
先履行使命行列里边一切的微使命
然后履行一个宏使命
然后再履行一切的微使命
再履行一个宏使命，再履行一切的微使命顺次类推到履行结束。

3-6的这个循环称为事情循环Event Loop

事情循环是JavaScript完成异步的一种办法，也是JavaScript的履行机制

async/await （重点）

（个人注解：async/await 底层依然是 Promise，所所以微使命，仅仅 await 比较特别）

async

当咱们在函数前运用async的时分，使得该函数回来的是一个Promise目标

async function test() {
    return 1   // async的函数会在这儿帮咱们山人运用Promise.resolve(1)
}
// 等价于下面的代码
function test() {
   return new Promise(function(resolve, reject) {
       resolve(1)
   })
}
// 可见async仅仅一个语法糖，仅仅协助咱们回来一个Promise而已

await

await表示等候，是右侧「表达式」的成果，这个表达式的计算成果能够是 Promise 目标的值或许一个函数的值（换句话说，便是没有特别限定）。而且只能在带有async的内部运用

运用await时，会从右往左履行，当遇到await时， ★★★★★会堵塞函数内部处于它后边的代码，去履行该函数外部的同步代码，当外部同步代码履行结束，再回到该函数内部履行剩余的代码★★★★★, 而且当await履行结束之后，会先处理微使命行列的代码

示例

//1
console.log('1');    
//2
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
//3
process.nextTick(function() {
    console.log('6');
})
//4
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
//5
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})
// 先履行1 输出1
// 履行到2，把setTimeout放入异步的使命行列中（宏使命）
// 履行到3，把process.nextTick放入异步使命行列中（微使命）
// 履行到4，上面说到promise里边是同步使命，所以输出7，再将then放入异步使命行列中（微使命）
// 履行到5，同2
// 上面的同步使命悉数完结，开端进行异步使命
// 先履行微使命，发现里边有两个微使命，分别是3，4压入的，所以输出6 8
// 再履行一个宏使命，也便是第一个setTimeout
// 先输出2，把process.nextTick放入微使命中，再如上promise先输出4，再将then放入微使命中
// 再履行所以微使命输出输出3 5
// 相同的，再履行一个宏使命setTImeout2，输出9 11 在履行微使命输出10 12
// 所以最好的次序为：1 7 6 8 2 4 3 5 9 11 10 12

async function async1() {
    console.log( 'async1 start' )
    await async2()
    console.log( 'async1 end' )
}
async function async2() {
    console.log( 'async2' )
}
console.log( 'script start' )
setTimeout( function () {
    console.log( 'setTimeout' )
}, 0 )
async1();
new Promise( function ( resolve ) {
    console.log( 'promise1' )
    resolve();
} ).then( function () {
    console.log( 'promise2' )
} )
console.log( 'script end' )
// 首要履行同步代码，console.log( 'script start' )
// 遇到setTimeout,会被推入宏使命行列
// 履行async1(), 它也是同步的，仅仅回来值是Promise，在内部首要履行console.log( 'async1 start' )
// 然后履行async2(), 然后会打印console.log( 'async2' )
// 从右到左会履行, 当遇到await的时分，堵塞后边的代码，去外部履行同步代码
// 进入new Promise,打印console.log( 'promise1' )
// 将.then放入事情循环的微使命行列
// 持续履行，打印console.log( 'script end' )
// 外部同步代码履行结束，接着回到async1()内部, 持续履行 await async2() 后边的代码，履行 console.log( 'async1 end' ) ，所以打印出 async1 end 。（个人了解：async/await本质上也是Promise，也是归于微使命的，所以当遇到await的时分，await后边的代码被堵塞了，应该也是被放到微使命行列了，当同步代码履行结束之后，然后去履行微使命行列的代码，履行微使命行列的代码的时分，也是按照被压入微使命行列的次序履行的）
// 履行微使命行列的代码, 打印 console.log( 'promise2' )
// 进入第2次事情循环，履行宏使命行列, 打印console.log( 'setTimeout' )
/**
 * 履行成果为：
 * script start
 * async1 start
 * async2
 * promise1
 * script end
 * async1 end
 * promise2
 * setTimeout
 */

console.log(1);
async function fn(){
    console.log(2)
    new Promise((resolve)=>{
        resolve();
    }).then(()=>{
        console.log("XXX")
    })
    await console.log(3)
    console.log(4)
}
fn();
new Promise((resolve)=>{
    console.log(6)
    resolve();
}).then(()=>{
    console.log(7)
})
console.log(8)
// 履行成果为：1 2 3 6 8 XXX 4 7
/*
前面的 1 2 3 6 8 不再解析，重点是后边的 XXX 4 7，由此可见 await console.log(3) 之后的代码 console.log(4) 是被放入到微使命行列了，
代码 console.log("XXX") 也是被压入微使命行列了，console.log("XXX")  是在 console.log(4) 之前，
所以当同步使命履行结束之后，履行微使命行列代码的时分，优先打印出来的是 XXX ，然后才是 4 。
*/

console.log(1);
async function fn(){
    console.log(2)
    await console.log(3)
    await console.log(4)
    await console.log("await之后的：",11)
    await console.log("await之后的：",22)
    await console.log("await之后的：",33)
    await console.log("await之后的：",44)
}
setTimeout(()=>{
    console.log(5)
},0)
fn();
new Promise((resolve)=>{
    console.log(6)
    resolve();
}).then(()=>{
    console.log(7)
})
console.log(8)
/**
 * 履行成果为：
 * 1
 * 2
 * 3
 * 6
 * 8
 * 4
 * 7
 * await之后的： 11
 * await之后的： 22
 * await之后的： 33
 * await之后的： 44
 * 5
 */
/*
由此可见，代码履行的时分，只要碰见 await ，都会履行完当时的 await 之后，
把 await 后边的代码放到微使命行列里边。但是定时器里边的 5 是最终打印出来的，
可见当不断碰见 await ，把 await 之后的代码不断的放到微使命行列里边的时分，
代码履行次序是会把微使命行列履行结束，才会去履行宏使命行列里边的代码。
*/

Promise.resolve().then(() => {
  console.log(0);
  return Promise.resolve(4)   // 顺延2位  假如是return 4 则打印 0、1、4、2、3、5、6、7
}).then(res => console.log(res))
Promise.resolve().then(() => {
  console.log(1);
}).then(() => {
  console.log(2);
}).then(() => {
  console.log(3);
}).then(() => {
  console.log(5);
}).then(() => {
  console.log(6);
}).then(() => {
  console.log(7);
})
/*
此题首要注意的是原生的Promise的then办法中，假如回来的是一个普通值，则回来的值会被当即调用并赋值给resolve函数，
假如回来的是一个thenable，则then办法将会被放入到微行列中履行，
假如回来的是一个Promise.resolve，则会再加一次微使命行列。
即微使命后移，Promise.resolve自身是履行then办法，而then办法自身是在微使命行列中履行，
一起return Promise.resolve时是将resolve调用的回来值 作为上级then中resolve的参数传递，
调用外层then办法时自身是在微行列里边，所以函数的履行次序是要在微行列中下移两次。
*/

依据w3c的最新解说

每个使命都有一个使命类型 , 同一个类型的使命有必要在一个行列也便是一共有多个行列 , 不同类型的使命能够分属不同的行列,在一个次事情循环中,浏览器能够依据实际情况从不同的行列中区出使命履行
浏览器有必要预备好一个微行列 , 微行列中的使命优先一切其他使命履行他里边的东西一切都要给我等连制作使命都要等便是最高优先级了

跟着浏览器的杂乱度急剧提升 W3C不再运用宏行列的说法

在现在chrome的完成中至少包含了下面的行列

延时行列 : 用于存放计时器抵达后的回调使命 , 优先级中
交互列队 : 用于存放用户操作后产生的事情处理使命 , 优先级高
微行列 : 用户存放需要最快履行的使命优先级最高

增加使命到微行列的首要方法首要是运用 Promise、MutationObserver

例如：
// 当即把一个函数增加到微行列
Promise.resolve().then(函数)

使命有优先级吗？

使命没有优先级，在音讯行列中先进先出
但音讯行列是有优先级的

// 马上把一个函数增加到微行列 最高履行
promise.resolve().then(函数)
setTimeOut(()=>{ // 第三步履行延时行列中的使命
  console.log(1);
},0)
promise.resolve().then(()=>{ // 第二步履行微行列中的使命
  console.log(2);
})
console.log(3); // 第一步先履行全局js
// 3 2 1

面试题

1、怎么了解 JS 的异步？

JS是一门单线程的言语，这是因为它运转在浏览器的烘托主线程中，而烘托主线程只要一个。

而烘托主线程承担着许多的工作，烘托页面、履行 JS 都在其间运转。

假如运用同步的方法，就极有或许导致主线程产生堵塞，然后导致音讯行列中的许多其他使命无法得到履行。这样一来，一方面会导致繁忙的主线程白白的耗费时刻，另一方面导致页面无法及时更新，给用户形成卡死现象。

所以浏览器选用异步的方法来防止。详细做法是当某些使命产生时，比方计时器、网络、事情监听，主线程将使命交给其他线程去处理，自身当即结束使命的履行，转而履行后续代码。当其他线程完结时，将事先传递的回调函数包装成使命，加入到音讯行列的结尾排队，等候主线程调度履行。

在这种异步形式下，浏览器永不堵塞，然后最大限度的确保了单线程的流通运转。

2、论述一下js的事情循环

事情循环又叫做音讯循环，是浏览器烘托主线程的工作方法。

在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从音讯行列中取出第一个使命履行，而其他线程只需要在适宜的时分将使命加入到行列结尾即可。

曩昔把音讯行列简单分为宏行列和微行列，这种说法现在已无法满意杂乱的浏览器环境，取而代之的是一种愈加灵活多变的处理方法。

依据 W3C 官方的解说，每个使命有不同的类型，同类型的使命有必要在同一个行列，不同的使命能够归于不同的行列。不同使命行列有不同的优先级，在一次事情循环中，由浏览器自行决定取哪一个行列的使命。但浏览器有必要有一个微行列，微行列的使命一定具有最高的优先级，有必要优先调度履行。

3、JS 中的计时器能做到精确计时吗？为什么？

不可，因为：

计算机硬件没有原子钟，无法做到精确计时
操作系统的计时函数自身就有少量误差，因为 JS 的计时器最终调用的是操作系统的函数，也就携带了这些误差
按照 W3C 的规范，浏览器完成计时器时，假如嵌套层级超越 5 层，则会带有 4 毫秒的最少时刻，这样在计时时刻少于 4 毫秒时又带来了误差
受事情循环的影响，计时器的回调函数只能在主线程闲暇时运转，因此又带来了误差

附录：

async-await事情循环：www.cnblogs.com/smile-fanyi…

带你深入理解js事件循环机制

同步使命和异步使命（微使命和宏使命）

履行过程: 同步使命 —> 微使命 —> 宏使命

async/await （重点）

（个人注解：async/await 底层依然是 Promise，所所以微使命，仅仅 await 比较特别）

示例

依据w3c的最新解说

面试题

1、怎么了解 JS 的异步？

2、 论述一下js的事情循环

3、JS 中的计时器能做到精确计时吗？为什么？

附录：

相关文章

不得不看的Flutter与Android混合开发

Vue3中操作dom的四种方式，建议收藏！

前端周报：前端最强学姐~语雀挂了！Node 21 官宣。（2023 年第 44 周）

code review真的很有必要！

作者信息

2、论述一下js的事情循环