day041:如何理解EventLoop——浏览器篇

Posted 2021-04-30 前端三元同学

干讲理论不容易理解，让我们直接以一个例子开始吧:

console.log('start');setTimeout(() => { console.log('timeout');});Promise.resolve().then(() => { console.log('resolve');});console.log('end');

我们来分析一下:

1. 刚开始整个脚本作为一个宏任务来执行，对于同步代码直接压入执行栈(关于执行栈，若不了解请移步之前的文章《javascript内存机制之问——数据是如何存储的？》)进行执行，因此 先打印start和end
2. setTimeout 作为一个宏任务放入宏任务队列
3. Promise.then作为一个为微任务放入到微任务队列
4. 当本次宏任务执行完，检查微任务队列，发现一个Promise.then, 执行
5. 接下来进入到下一个宏任务——setTimeout, 执行

因此最后的顺序是:

startendresolvetimeout

这样就带大家直观地感受到了浏览器环境下 EventLoop 的执行流程。不过，这只是其中的一部分情况，接下来我们来做一个更完整的总结。

1. 一开始整段脚本作为第一个 宏任务执行
2. 执行过程中同步代码直接执行， 宏任务进入宏任务队列， 微任务进入微任务队列
3. 当前宏任务执行完出队，检查微任务队列，如果有则依次执行，直到微任务队列为空
4. 执行浏览器 UI 线程的渲染工作
5. 检查是否有Web worker任务，有则执行
6. 执行队首新的宏任务，回到2，依此循环，直到宏任务和微任务队列都为空

最后给大家留一道题目练习:

Promise.resolve().then(()=>{ console.log('Promise1')  setTimeout(()=>{ console.log('setTimeout2') },0)});setTimeout(()=>{ console.log('setTimeout1') Promise.resolve().then(()=>{ console.log('Promise2')  })},0);console.log('start');
// start// Promise1// setTimeout1// Promise2// setTimeout2