js单线程，事件循环，微任务宏任务

雨点打透心脏的1/2处 2023-01-06 13:59 258阅读 0赞

# JavaScript 事件循环（含宏任务与微任务） #

#### JavaScript 特点 ####

> JavaScript 是单线程非阻塞的一门语言。单线程意味着：JavaScript 代码在执行的时候只有一个主线程去处理所有的任务，即同一时间只能做一件事情。非阻塞则表示：当执行到一项异步任务的时候，主线程会挂起当前这个异步任务，然后在异步任务返回结果的时候再跟进一定的规则去执行相应的回调。

#### 思考： 为什么 JavaScript 要设计成单线程？ ####

> 单线程是必要的，也是 Javascript 这门语言的基石，原因之一在其最初也是最主要的执行环境——浏览器中，我们需要进行各种各样的 DOM 操作。试想一下 如果 Javascript 是多线程的，那么当两个线程同时对 DOM 进行一项操作，例如一个向其添加事件，而另一个删除了这个 DOM，此时该如何处理呢？因此，为了保证不会 发生类似于这个例子中的情景，Javascript 选择只用一个主线程来执行代码，这样就保证了程序执行的一致性。

#### 事件循环（Event Loop） ####

> JavaScript 如何实现非阻塞呢？没错，就是通过事件循环的实现的。而事件循环是通过任务队列机制协调的。

> 在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理是比较复杂的，主要步骤如下：

> 在本次 tick 中选择最先进入队列的任务，如有则执行一次；  
> 检查是否存在微任务（micro-task），如有则执行，直至清空 Microtask Queue；  
> 更新 render；  
> 主线程重复执行上述步骤。  
> tick 需要了解的是：

#### JS 任务分为同步任务和异步任务； ####

> 同步任务都在主线程上执行，形成一个执行栈；  
> 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了结果，就在任务队列里面放置一个事件  
> 一旦执行栈中所有同步任务执行完毕（JS 引擎空闲之后），就会去读取任务队列，将可运行的异步任务添加到可执行栈里面，开始执行。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

> 任务有同步任务、异步任务，而异步任务又分为宏任务（macro-task）和微任务（micro-task）

> 宏任务（macro-task）  
> 可以理解成：每次执行栈的代码就是一个宏任务（包括每次从事件队列中获取的一个事件回调并放到执行中执行）。  
> 浏览器为了能够使得 JS 内部 macro-task 与 DOM 任务有序地执行，会在宏任务执行结束之后，在下一个宏任务开始执行之前，对页面进行重新渲染。

> macro-task -> render -> macro-task -> …

> 宏任务包括：  
> setInterval  
> setTimeout  
> setImmediate（node.js）  
> XHR 回调  
> 事件回调（鼠标键盘事件）  
> indexedDB 数据库等 I/O 操作  
> UI rendering

> 微任务（micro-task）  
> 可以理解成：当前 task 执行结束之后立即执行的任务。（在下一个 task 之前 ，在渲染之前）。

> macro-task -> micro-task -> render -> macro-task -> …

> 微任务包括：  
> Promise.then catch finally  
> process.nextTick（node.js）  
> MutationObserver  
> Object.observe（已被弃用）

#### 运行机制 ####

> 执行一个宏任务（执行栈中没有就从事件列表中获取）  
> 执行过程中如果遇到微任务，就将其添加到微任务的任务队列里面；  
> 宏任务执行完毕之后，立即执行当前微任务队列里面的所有微任务（依次执行）  
> 当前宏任务执行完毕之后，开始检查渲染，然后 GUI 线程接管渲染（但是 UI render 不一定会执行，因为需要考虑 UI 渲染消耗的性能已经有没有 UI 变动）  
> 渲染完毕后，JS 线程继续接管，开始下一个宏任务（从事件队列中获取）  
> JS 不断重复以上步骤，直至所有任务执行完毕。（栈内存溢出也会终止执行）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221119/2e379e8cfc9242099ef534b5216bc97c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210114192818841.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70