js事件循环机制

今天终于把js中的事件循环机制搞懂了，记录一下吧！

js中的事件循环机制

由于js是一门单线程语言，因此异步操作都是放在事件循环队列中等待主执行栈来执行，并没有专门的异步执行线程。

事件循环机制

同步任务和异步任务分别进入不同的执行环境，同步任务进入主线程（主执行栈）异步任务进入任务循环队列，当主线程的任务执行完毕后会去任务循环队列读取相应的任务并将其推入主线程，这样一直循环的过程称为事件循环机制。
1.宏任务（macro task）：主要包含script、setTImeout、setInterval、I/O、UI交互事件
2. 微任务(micro tesk) ：主要包含Promise、MutaionObserver、process.nextTick(Node.js 环境)
3. 具体过程 ：首先主线程会先执行同步任务，当主线程中的任务全部执行完毕后，先检查微任务队列中的任务是否执行完毕若微任务队列中还有未执行的任务先将该队列中的任务执行完毕再去宏队列中读取任务，否则直接去宏队列中读取任务。
4. 练习（写出下列代码的输出顺序）

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

//输出结果
script statr
script end
promise1
promise2
setTimeout

分析：
. 代码开始执行首先是console.log()为同步任务所以直接输出：script star;
. 接着向下执行到setTimeout()为宏任务，则进入宏任务队列；
. 再向下执行到promise的第一个the()函数进入微任务队列记为the1，第二个the()函数同样进入微任务队列记为the2；
. 最后只想到console.log()直接输出：script end;
. 此时主线程中的任务已经执行完毕，在读取下一个任务之前先判断微任务队列中是否还有任务未执行，若有执行该队列中的任务；
. 开始执行the1输出 promise1，执行the2输出promise2
. 微任务执行完毕读取宏任务队列中的任务setTimeout()并执行此任务，输出setTimeout。

console.log('script start');

setTimeout(function() {
  console.log('timeout1');
}, 10);

new Promise(resolve => {
    console.log('promise1');
    resolve();
    setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
    console.log('then1')
})

console.log('script end');

//输出结果
script start
promise1
script end
then1
timeout1
timeout2

小结

微任务比宏任务优先执行