关于程序员:理解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数据类型与内存存储<br/>
与上述概念不同，明天所讲的堆和栈并不是这个概念(以下图来自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),会优先清空微工作，在去清空宏工作，而后在去查看以后主线程，是否有新的工作产生，周而复始

常见的工作划分

下图就是主线程和工作队列的示意图。

<br/>
(图来源于阮一峰博客)

残缺的事件循环

写在最初

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

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

本文由mdnice多平台公布