JavaScript运行机制及宏任务和微任务

JavaScript运行机制
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事；因此，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

JavaScript任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

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

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复

事件和回调函数以及Event Loop（事件循环）直接去看，上面写得很详细：JavaScript 运行机制详解：再谈Event Loop-阮一峰

宏任务（macrotask ）和微任务（microtask ）

宏任务（macrotask）和微任务 （microtask） 表示异步任务的两种分类

宏任务

微任务

任务优先级

宏任务macrotask：主代码块 > setImmediate > MessageChannel > setTimeout / setInterval (大部分浏览器会把DOM事件回调优先处理，因为要提升用户体验给用户反馈，其次是network IO操作的回调，再然后是UI render，之后的顺序会因不同浏览器会有所不同，这里不做过多讨论)

微任务microtask：process.nextTick > Promise = MutationObserver

就是说任务执行的顺序是建立与优先级之上的：
如果队列已经有一个setTImeout的宏任务，后来又加入了主代码的宏任务，会让主代码的任务插队。

参考博客：https://zhuanlan.zhihu.com/p/78113300