理解Javascript事件循环机制(Event Loop)

js是一个单线程

众所周知，现代的编程语言发展很快，形成了多种语言，在这其中，js是一个特例，它是一个单线程的语言，相比于JAVA、PHP、Python，js有它自己的独特，js运行于浏览器中，在浏览器中创建DOM、销毁DOM，为了能够保证程序能够正常运行，在设计之初，就规定了JS只能是单线程，设想下： 如果JS是一个多线程，在同一个时刻，有多个线程去操作DOM。比如同时执行更新DOM、销毁DOM。浏览器会发生紊乱，并不知道此时应该是如何处理，造成程序的错误，所以JS是一个单线程。

理解堆(stack)和栈(heap)的概念

如果有同学知道JS数据类型在内存中的存储方式，那么就应该知道，JS的基本数据类型(string、number、boolean、null、undefined、symbol)是存储在栈中，而引用类型数据(Object、array、function)是存储在堆中，实际这样并不准确，因为引用类型对应的key在栈中，对应的value是引用类型在栈中的指针，指针指向的是在堆中的地址，(如果你学习过计算机的基础知识的话)如果对于这个不了解的话，可以查看这篇文章: js数据类型与内存存储
与上述概念不同，今天所讲的堆和栈并不是这个概念(以下图来自MDN)

当页面开始执行函数的时候，会把当前执行上下文(content)压入栈中，初始化的时候，会把Global压入最底下，然后把初始化函数在压入栈中，执行init方法会依次的向外弹出getList 、init、Global，当浏览器分配的调用栈内存空间被占满时，就会引发常说的“堆栈溢出”错误。

<script>
    function init () {
    }
    function getList () {}
    init ()

</script>

如果你能完全理解以上的逻辑，那么以下的执行顺序相信你也能得心应手
<script>
    setTimeout(() => {
        conosle.log('执行setTimeout')
    }, 100)
    new Promise((reslove, reject) => {
        resolve('1')
    }).then(res => {
        console.log('2')
    })
    // ‘1’
    // ‘2’
    // 执行setTimeout
</script>

理解任务队列概念

前面说过，JS是一个单线程的，那么当执行任务的时候，就需要一个队列，排队执行，否则，任务混乱，导致程序错误，任务为同步任务和异步任务。异步任务在执行的时候不会阻塞主线程，会把任务放在一个队列里面，队列里面的任务分为宏任务(macro-task)和微任务(micro-task),会优先清空微任务，在去清空宏任务，然后在去检查当前主线程，是否有新的任务产生，循环往复

常见的任务划分

宏任务	微任务
setTimeout	promise(then、catch、finally)
setInterval	process.nexttick
setImmediate	MutationObserver
requestAnimationFrame

下图就是主线程和任务队列的示意图。
(图来源于阮一峰博客)

完整的事件循环

写在最后

我是crazyu，一位前端开发工程师。

• 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
• 本文首发于微信公众号：crazyu 前端，未经许可禁止转载
• 加我微信号:crazyu_chang,有任何问题可以随时与我沟通