crazyu
2022/10/19阅读:40主题:默认主题
理解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,有任何问题可以随时与我沟通
作者介绍