JavaScript的事件循环原理（Event Loop）

一个悲伤的故事

我是19应届的，但是秋招还是没拿到Offer，也许是我期望太高，要求太高，亦或许是其他。。。现在打算好好再学习一些更深层次的知识，决战春招，舍友拿了58的17K的offer，人比人得死（虽然现在秋招还没结束，但是好的公司没几个在招人了）

---

那么我们进入正题吧，用一段代码来说明这个事件循环（Event Loop）的原理：

//这里我用花括号包起来防止污染
{
    const log = console.log;
    log('代码开始');//这里是运行环境代码，就是Context Script
    
    new Promise((resolve, reject) => {
    	//这里的代码相当于Promise的构造函数，你new之后，这里会直接执行
        log("微任务A构造执行");
        resolve();
    }).then(() => {
    	//then是异步回调，我假设你们都懂Promise的哈
        log("微任务A回调");
    });
    log("微任务A已添加");
    
    setTimeout((args) => {//setTimeout的回调函数可以拿到setTimeout的第三个参数（数组）
        log('宏任务X执行，，，', args);
        new Promise((resolve, reject) => {
            log("微任务B构造执行");
            resolve();
        }).then(() => {
            log("微任务B回调");
        });
        log("微任务B已添加");
    }, 0, [1, 2, 3, 4]);//这个比较冷门，setTimeout的第三个参数，一个数组，这里提一下而已。。。
    log("宏任务X已添加");

    
    setTimeout((args) => {
        log('宏任务Y执行，，，', args);
    }, 0, [1, 2])
    log("宏任务Y已添加");
}

输出结果：

代码开始
微任务A构造执行
微任务A已添加
宏任务X已添加
宏任务Y已添加
微任务A回调
宏任务X执行，，， (4) [1, 2, 3, 4]
微任务B构造执行
微任务B已添加
微任务B回调
宏任务Y已添加
宏任务Y执行，，， (2) [1, 2]

---

理解

执行一个宏任务（栈中没有就从任务队列中获取）
执行过程中遇到微任务，就将它加入微任务队列
宏任务执行完毕，立即依次执行所有微任务，直到微任务队列为空
当前宏任务执行完毕，开始检查渲染，GUI线程接管渲染
渲染完毕后，JS线程接管，开始下一个宏任务（从事件队列中开始）

（宏任务和微任务的分类自行搜索）

图解：