理解JS执行顺序

前言

 众所周知，JS 的执行顺序是自上而下的。严格意义上来说，javascript 没有多线程的概念，所有的程序都是单线程依次执行的。就是代码在执行过程中，另一段代码想要执行就必须等当前代码执行完成后才可以进行。

注意

js 代码执行分为两个部分：1、代码的检查装载阶段（预编译阶段），此阶段进行变量和函数的声明，但是不对变量进行赋值，变量的默认值为 undefined。2、代码的执行阶段，此阶段对变量进行赋值和函数的声明。所以：Js 的变量提升和函数提升会影响 JS 的执行结果，ES6 中的 let 定义的变量不会提升 
3、js 的执行顺序，先同步后异步
4、异步中任务队列的执行顺序：先微任务 microtask 队列，再宏任务 macrotask 队列
5、调用 Promise 中的 resolve，reject 属于微任务队列，setTimeout 属于宏任务队列
所以：【同步 > 异步；微任务 > 宏任务】

示例

console.log('event start')
setTimeout(function () {console.log('setTimeout');
});

new Promise(function(resolve,reject){console.log('promise start')
    resolve()}).then(function(){console.log('promise end')
})
console.log('event end')

执行结果为：

event start
promise start
event end
promise end
undefined
setTimeout

解释：

 主线程执行按顺序代码
遇到 setTimeout, 回调进入到宏任务队列上
遇到 Promise, 立即执行, then 函数进入到微任务队列
同步代码执行结束, 主线程检查是否存在微任务, 发现 then, 执行
微任务执行完毕, 再去查找宏任务 setTimeout, 执行
setTimeout 执行结束, 检查是否存在微任务, 不存在, 结束.

图例