JavaScript 的执行机制
单线程意味着所有任务需要排队执行，前面的完成，后面的任务才能执行。因此，如果前面的任务耗时太久，后面的任务就需要一直等，影响用户体验，所以出现了异步的概念。
JavaScript的执行机制是指JavaScript代码在浏览器或Node.js环境中运行时的工作原理。JavaScript是一种单线程、非阻塞、事件驱动的语言，虽然HTML5中JavaScript也支持了多线程webWorker，但是也是不允许操作DOM。其执行机制包括以下几个关键方面：
-
解析：
- JavaScript代码首先会被解析器解析成抽象语法树（AST）。
- 解析器会检查代码是否有语法错误，并将代码转换成可执行的指令。
-
执行上下文（Execution Context）：
- 在执行之前，JavaScript引擎会创建一个全局执行上下文（Global Execution Context）。
- 每次调用函数时，都会创建一个新的函数执行上下文（Function Execution Context）。
- 执行上下文包含变量环境、词法环境和this关键字的值。
-
作用域链（Scope Chain）：
- JavaScript中的作用域是通过作用域链来管理的。
- 每个执行上下文都有自己的词法环境，其中包含了变量和函数声明。
- 当查找变量或函数时，JavaScript引擎会从当前执行上下文的词法环境开始，逐级向外层作用域查找，直到找到匹配的标识符或达到全局作用域。
-
变量提升（Hoisting）：
- JavaScript中的变量和函数声明会被提升到其所在作用域的顶部。
- 这意味着你可以在声明之前使用变量和函数，但它们的实际赋值或执行是在代码中的位置决定的。
-
执行栈（Call Stack）：
- 执行上下文以栈的形式管理，这被称为调用栈（Call Stack）。
- 当函数被调用时，其执行上下文被推入调用栈的顶部；当函数执行完成时，该执行上下文被弹出栈。
- 这保证了JavaScript是单线程的，一次只能执行一个任务（函数调用）。
-
事件循环（Event Loop）：
- JavaScript运行时环境（浏览器或Node.js）提供了一个事件循环来处理异步操作。
- 异步任务（例如定时器、事件处理程序、HTTP请求等）被放入任务队列（Task Queue）中。
- 当调用栈为空时，事件循环会将任务队列中的任务一个一个地移入调用栈执行。
-
回调函数：
- 异步操作通常使用回调函数来处理。
- 当异步操作完成时，回调函数被添加到任务队列，并在适当的时候执行。
-
Promise和async/await：
- Promise和async/await是用来处理异步操作的现代JavaScript特性，它们提供了更清晰、可读性更好的异步编程方式。
同步任务
代码从上到下按顺序依次执行。
异步任务
1. 宏任务
DOM操作导致的事件（例如，元素的变动、事件监听器）、setTimeout、setInterval、用户交互事件（例如点击事件）、postMessage、Ajax、XMLHttpRequest或fetch等网络请求
2. 微任务
Promise.then / catch / finally、MutationObserver变动观察器的回调函数、process.nextTick(Node.js 环境)、async/await中的await关键字
执行顺序：
- 同步任务在主进程执行形成一个执行栈，主线程之外，还存在一个"任务队列"，里面存放异步任务。
- 先执行一个宏任务，也就是先加载整个script，这就算是一个宏任务。
- 执行所有的微任务（Microtasks）。
- 从宏任务队列中再取出一个宏任务（Macrotask）执行。
- 执行可能产生的 UI 重渲染。
- 重复以上步骤，直到所有的任务队列为空。
看一道题：
ts
async function Prom() {
console.log('Y')
await Promise.resolve()
console.log('x')
}
setTimeout(() => {
console.log(1)
Promise.resolve().then(() => {
console.log(2)
})
}, 0)
setTimeout(() => {
console.log(3)
Promise.resolve().then(() => {
console.log(4)
})
}, 0)
Promise.resolve().then(() => {
console.log(5)
})
Promise.resolve().then(() => {
console.log(6)
})
Promise.resolve().then(() => {
console.log(7)
})
Promise.resolve().then(() => {
console.log(8)
})
Prom()
console.log(0)// 输出结果是： Y 0 5 6 7 8 x 1 2 3 4
分析：
setTimeout是异步宏任务，放入宏任务队列Promise.then()是异步微任务，放入微任务队列Prom同步代码，立刻执行，输出Y。但遇到await微任务，再次放入微任务队列，等候。- 执行
console.log同步代码，输出0。 - 到目前为止，相当于
script宏任务执行结束，开始执行所有的微任务。 - 查看微任务队列，依次执行微任务
Promise.then()，输出5，6，7，8。 - 对了，不要忘记下一个微任务还有过程3中遇到的
await微任务，后面的Promise.resolve()和consonle.log('x')相当于是Promise.resolve().then(()=>console.log('x'))，所以然后输出x。 - 到此，微任务队列执行完，继续执行下一个宏任务队列
setTimeout，输出1，然后又遇到Promise，放入到微任务队列。 - 每次执行完宏任务都需要清空微任务队列，所以执行
Promise输出 2 。
10.下一个setTimeout中包含Promise也是同理，因此依次输出2和4。