浏览器中的Event Loop-一一网

每天做个总结吧，坚持就是胜利！

    /**
        @date 2021-05-28
        @description 浏览器中的Event Loop
    */
复制代码

壹（序）

首先我们知道js是一门单线程且非阻塞的语言。

单线程是由于js主要的运行环境是浏览器，而浏览器中存在很多dom操作，假如js是一门多线程语言，那两个线程同时修改和删除同一个dom的时候，该怎么办？

非阻塞是js代码在执行过程中，遇到异步操作时，不会等待异步操作完成，而是将其挂起，等操作完成后执行相应的回调。而Event Loop就用来实现js非阻塞特性。

贰（解释）

那么什么是Event Loop呢？

一段js代码在执行过程中，同步代码会在主线程中依次执行，遇到异步代码时会等待执行完成后（主线程继续往下执行同步代码），将相应的回调压入任务队列中，等到主线程中的同步代码执行完成，会去任务队列中查看有没有需要执行的回调代码，有的话则执行，在这些回调中也是先执行同步代码，遇到异步代码则挂起，等待异步代码完成后压入任务队列，同步执行完成后再去查看任务队列中有没有需要执行的回调代码…这样一个循环过程，称为事件循环。

看一段代码：

console.log(1);
setTimeout(() => {
    console.log(2);
}, 0);
console.log(3);
复制代码

首先同步执行代码console.log(1);，输出1，然后遇到异步的setTimeout，然后往下执行同步代码console.log(3);，输出3，同步代码执行完成后，去任务队列中取出setTimeout的回调执行，输出2；

叁（宏任务，微任务）

看下面一段代码：

console.log(1);
setTimeout(() => {
    console.log(2);
}, 0);
const p = new Promise((resolve, reject) => {
    resolve(4);  
});
p.then(val => {
    console.log(val)
});
console.log(3);
复制代码

按照刚刚的解释，应该是输出1,3,2,4，但是实际上是输出1,3,4,2；

这是因为任务还分为宏任务，微任务，执行的时候会首先执行完所有的微任务，再去执行宏任务；

宏任务：

setInterval;
setTimeout;
setImmediate;
I/O操作；

微任务：

Promise；
MutationObserver；

肆（练习）

做一道练习题：

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');
复制代码