script代码块在JavaScript中的执行机制：宏任务与执行顺序解析
一、核心结论：script代码块属于宏任务
在JavaScript的事件循环机制中，script代码块整体被归类为宏任务（Macrotask）。这是理解JavaScript异步执行顺序的基础认知。
二、事件循环与任务队列基础
JavaScript是单线程语言，通过事件循环（Event Loop）机制实现异步操作。事件循环的核心是管理两类任务队列：
- 宏任务队列（Macrotask Queue）：包含script代码块、setTimeout、setInterval、I/O操作、UI渲染等
- 微任务队列（Microtask Queue）：包含Promise.then/catch/finally、process.nextTick（Node环境）、queueMicrotask等
三、script代码块的完整执行流程
当浏览器加载并执行一个script代码块时，会严格遵循以下步骤：
步骤1：同步代码优先执行
script代码块内的所有同步代码会被立即执行，直到遇到第一个异步操作（如setTimeout、Promise等）。
步骤2：处理微任务队列
同步代码执行完毕后，事件循环会清空整个微任务队列（按先进先出顺序执行所有微任务），然后再进入下一步。
步骤3：渲染页面（如果需要）
在完成微任务处理后，浏览器可能会进行UI渲染（具体时机由浏览器决定）。
步骤4：从宏任务队列取下一个任务
事件循环会从宏任务队列中取出下一个任务（可能是另一个script代码块、setTimeout回调等）开始执行，然后重复上述步骤。
四、代码示例验证执行顺序
以下代码清晰展示了script代码块作为宏任务的执行顺序：
console.log('1. script同步代码开始');
// 宏任务：setTimeout回调
setTimeout(() => {
console.log('5. setTimeout宏任务');
}, 0);
// 微任务：Promise.then
Promise.resolve()
.then(() => {
console.log('3. Promise微任务1');
})
.then(() => {
console.log('4. Promise微任务2');
});
console.log('2. script同步代码结束');执行结果及分析：
- 首先输出"1. script同步代码开始"和"2. script同步代码结束"（同步代码优先执行）
- 接着输出"3. Promise微任务1"和"4. Promise微任务2"（清空微任务队列）
- 最后输出"5. setTimeout宏任务"（执行下一个宏任务）
五、关键总结
- script代码块本身是第一个宏任务，后续的异步操作会根据类型进入宏任务或微任务队列
- 执行顺序口诀：同步代码 → 微任务队列清空 → 宏任务队列取下一个
- 微任务队列的优先级高于宏任务队列，每次宏任务执行后都会先清空微任务队列
理解这一机制对于掌握JavaScript异步编程至关重要，尤其是在处理复杂的异步逻辑和性能优化时。