js： eventLoop 宏任务和微任务解析和易忽略的点在 HTML 页面中执行多个 <script> 标签的顺序在

在 HTML 页面中执行多个 `<script>` 标签的顺序

在 HTML 页面中，JavaScript 脚本的执行顺序是由浏览器的事件循环（Event Loop）机制决定的。理解这个机制有助于掌握 JavaScript 的执行顺序，尤其是在涉及多个 <script> 标签时。

script标签本身是一个宏任务，当页面出现多个script标签的时候，浏览器会把script标签作为宏任务来解析

1. 示例分析

以下是一个示例，展示了在 HTML 页面中如何按顺序执行多个 <script> 标签中的 JavaScript 代码：

<!DOCTYPE html>
<html>
  <body>
    <script>
      console.log('Script 1');
      setTimeout(() => console.log('setTimeout'), 0);
      Promise.resolve().then(() => console.log('Promise1'));
    </script>

    <script>
      console.log('Script 2');
    </script>
  </body>
</html>

执行过程解析

第一个 <script> 执行：
- 输出 "Script 1"（同步执行）
- setTimeout 被加入到下一轮宏任务队列
- Promise.then 被加入到当前轮微任务队列
当前宏任务执行结束后，执行微任务队列：
- 输出 "Promise"
执行第二个 <script>：//这个作为另一个宏任务来执行
- 输出 "Script 2"（同步执行）
下一轮事件循环中，执行宏任务（setTimeout）：
- 输出 "setTimeout"

3. 最终输出顺序

根据事件循环的机制，最终输出结果为：

Script 1  
Promise 
Script 2  
setTimeout

有个文章写的更好： juejin.cn/post/710092…