c

crazyu

V1

2022/10/19阅读:21主题:默认主题

理解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)

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

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

</script>
image.png
image.png
如果你能完全理解以上的逻辑,那么以下的执行顺序相信你也能得心应手
<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

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

完整的事件循环

JSEvent loop.drawio.png
JSEvent loop.drawio.png

写在最后

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

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

分类:

前端

标签:

JavaScript

作者介绍

c
crazyu
V1