JavaScript 执行机制

　　以前对js的执行机制只是停留到同步和异步的程度，昨天偶然间发现一个技术群里 有人问询的面试题（下图），发现不只是同步和异步的事情，群里有人就提出了宏任务和微任务（什么鬼呢，当时都不了解），这强烈的激起了我学习的好奇心，各种查资料。把自己的学习成果记录下来并且和大家分享

关于js

　　我们都了解js是一门单线程的语言，所谓的js"多线程"都是用单线程模拟出来的，包括栈和堆。

关于js执行机制

　　了解前端的人大概都对异步和同步还是比较了解的，那么我决定就不过多的描述了，大概就是js的执行顺序，先同步后异步。

setTimeout(function(){
    console.log('1')
});
    console.log('2')

　　然后就到了重头戏了，宏任务和微任务。

setTimeout(function(){
    console.log('1')
});

new Promise(function(resolve){
    console.log('2');
    for(var i = 0; i < 10000; i++){
        i == 99 && resolve();
    }
}).then(function(){
    console.log('3')
});

console.log('4');

　　不知道答案的小伙伴可以把代码复制下去运行一下。

　　首先先简单的介绍一下，宏任务和微任务就是对任务的再度细分的标准

• macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
• micro-task(微任务)：Promise，process.nextTick

　　对于这段代码的解释

• 这段代码作为宏任务，进入主线程。
• 先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue。
• 接下来遇到了Promise，new Promise立即执行（输出2），then函数分发到微任务Event Queue。
• 遇到console.log()，立即执行（输出4）。
• 好啦，整体代码script作为第一个宏任务执行结束，看看有哪些微任务？我们发现了then在微任务Event Queue里面，执行（输出3)。
• ok，第一轮事件循环结束了，我们开始第二轮循环，当然要从宏任务Event Queue开始。我们发现了宏任务Event Queue中setTimeout对应的回调函数，立即执行(输出1)。
• 结束（输出2431）。

总结：

　　对于js的执行机制，自我感觉大部分是作为面试题出现，开发中遇到的可能比重少（注意我只是说比重少，开发中执行顺序也是比较重要的）。我的总结就是，先看异步和同步的关系(主要是定时器)，如果解决不了，再分析宏观和微观任务