那些年大厂的面试题之js执行顺序

哔哩哔哩：JS 异步笔试题，请写出以下代码的执行结果

很多大厂都有过类似的问题，但b站的可谓是坑的最不明显的一个，接下来我们保持清晰的头脑，来用一个非常简单的方法来分析问题，保证看完本篇文章，你再也不会被类似问题问到！

var date = new Date() 

console.log(1, new Date() - date) 

setTimeout(() => {
   
    console.log(2, new Date() - date)
}, 500) 

Promise.resolve().then(console.log(3, new Date() - date)) 

while(new Date() - date < 1000) {
   } 

console.log(4, new Date() - date)

求上面的输出顺序和输出值，为什么？
说下答案

1 0
3 1
4 1000
2 1000

你答对了吗？

接下来我们随着学习js执行顺序，来慢慢的刨析本题。

event loop

很多人都听说过event loop 那么，它到底指的是什么呢？
Event Loop 是一个很重要的概念，指的是计算机系统的一种运行机制。
JavaScript语言就采用这种机制，来解决单线程运行带来的一些问题。 --《阮一峰的网络日志》

接下来我们要了解event loop的执行顺序

1. 首先执行 script 宏任务
2. 执行同步任务，遇见微任务进入微任务队列，遇见宏任务进入宏任务队列
3. 当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完
4. 执行浏览器 UI 线程的渲染工作
5. 检查是否有Web Worker任务，有则执行
6. 执行下一个宏任务，回到第二步，依此循环，直到宏任务和微任务队列都为空

微任务包括：MutationObserver、Promise.then()或catch()、Promise为基础开发的其它技术，比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick 、 Object.observe（已废弃；Proxy 对象替代）

宏任务包括：script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering 、 postMessage 、 MessageChannel

接下来我们使用例题来逐渐理解
注意： *下面的题目都是执行在浏览器环境下

1. 同步 + Promise

例题一：

var promise = new Promise((resolve, reject) => {
   
    console.log(1)
    resolve()
    console.log(2)
})
promise.then(()=>{
   
    console.log