关于javascript:js在浏览器中的执行机制

前言

单线程语言

js 是一门单线程语言，js 设计之初就是为了解决浏览器网页的交互，比方 DOM 操作、UI 动画等。如果 js 是多线程的，那么两个线程同时对一个 DOM 元素进行了互相抵触的操作，那么浏览器的解析器是无奈执行的。

为什么须要异步？

单线程语言在解决同步工作的时候常常会遇到很多耗时操作，比方接口申请，定时执行等，那么咱们的代码在执行的过程中会始终期待这些操作。js 提供了异步的形式解决这些问题。

异步的实现计划

js 实现异步的两个重要概念：eventloop 事件循环，工作队列（事件队列），工作队列又分为两种：微工作和宏工作。

• 微工作（micro-task）：process.nextTick（node），Promise.then，Promise.catch，Promise.finally，MutationObserver
• 宏工作：整体 script，setTimeout，setInterval，setImmediate，I/O，UI rendering

js 代码的执行过程

• 整体代码执行一遍，既执行一个宏工作，执行过程中遇到微工作和宏工作时别离将他们增加到微工作队列和宏工作队列；
• 整体代码执行实现后，也就是主线程为闲暇时，会立刻顺次执行微工作队列中的工作，执行过程中又可能遇到微工作和宏工作，别离增加至微工作队列和宏工作队列；
• 下面的过程直到微工作队列为空时，这时会依据事件循环机制获取第一个达到执行条件的宏工作，并执行，尔后与整体代码执行过程完全一致。
• 循环下面的执行过程，直到微工作队列和宏工作队列为空地位，主线程完结。

Promise 微工作何时增加到微工作队列？

• 如果 Promise 的状态为 pending 时，胜利和失败的回调会寄存在 [[PromiseFullReactions]] 和[[PromiseRejectReactions]]中，此时不能增加到微工作队列。
• 当 Promise 的状态为非 pending 时，回调被增加至微工作队列。

promise 链式调用中须要留神的问题

• 链式调用中，只有以后一个 then 的回调执行实现之后，紧跟的 then 中的回调才会被增加到微工作队列。
• 同一个 Promise 对的每一个链式调用的开始会首先一次进入微工作队列

参考文章：
https://juejin.cn/post/686957…