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),会优先清空微工作，在去清空宏工作，而后在去查看以后主线程，是否有新的工作产生，周而复始
常见的工作划分
| 宏工作 | 微工作 |
|---|---|
| setTimeout | promise(then、catch、finally) |
| setInterval | process.nexttick |
| setImmediate | MutationObserver |
| requestAnimationFrame |
下图就是主线程和工作队列的示意图。
<br/>
(图来源于阮一峰博客)
残缺的事件循环
写在最初
我是crazyu，一位前端开发工程师。
- 文中如有谬误，欢送在评论区斧正，如果这篇文章帮到了你，欢送点赞和关注
- 本文首发于微信公众号：crazyu 前端，未经许可禁止转载
- 加我微信号:crazyu_chang,有任何问题能够随时与我沟通
本文由mdnice多平台公布