理解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 执行结束, 检查是否存在微任务, 不存在, 结束.

图例