php单线程 理解Javascript事件循环机制(Event Loop)

js是一个单线程

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

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

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

与上述概念不同，今天所讲的堆和栈并不是这个概念(以下图来自MDN)

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

image.png

如果你能完全理解以上的逻辑，那么以下的执行顺序相信你也能得心应手

理解任务队列概念

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

常见的任务划分宏任务微任务

setTimeout

promise(then、catch、finally)

setInterval

process.nexttick

setImmediate

MutationObserver

requestAnimationFrame

下图就是主线程和任务队列的示意图。

(图来源于阮一峰博客)

完整的事件循环

JSEvent loop.drawio.png写在最后

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

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!