js script执行顺序

JavaScript 中脚本的执行顺序主要受到以下几个因素的影响：

基础概念

1. 同步与异步：
   • 同步代码按顺序执行，前一个任务完成后才会执行下一个任务。
   • 异步代码（如定时器、事件监听、Promise 等）可以在后台执行，不会阻塞主线程。

• 事件循环（Event Loop）：
  • JavaScript 是单线程的，通过事件循环机制来处理异步操作。
  • 事件循环不断地检查调用栈和任务队列，将任务队列中的回调函数推入调用栈执行。

执行顺序类型

1. 全局脚本执行顺序：
   • 页面加载时，从上到下依次执行 <script> 标签中的代码。

• 函数调用顺序：
  • 函数内部的代码按顺序执行。
  • 如果函数内部有异步操作，异步操作的回调会在事件循环的后续迭代中执行。
• 异步任务的执行顺序：
  • 使用 setTimeout、setInterval 等定时器时，回调函数会被放入宏任务队列。
  • Promise 的 then 和 catch 回调会被放入微任务队列，优先级高于宏任务。

应用场景

• 页面加载优化：合理安排脚本位置，避免阻塞页面渲染。
• 并发处理：利用异步编程提高程序响应性和性能。
• 复杂逻辑控制：通过异步流程控制库（如 async/await）简化异步代码编写。

常见问题及原因

1. 异步操作未按预期执行：
   • 原因可能是对异步操作的生命周期理解不足，或者回调函数未正确绑定。
   • 解决方法：使用 Promise 或 async/await 明确异步流程。

• 脚本加载顺序导致的依赖问题：
  • 原因是依赖的脚本在需要使用时还未加载完成。
  • 解决方法：使用动态导入或确保脚本按正确顺序加载。

示例代码

console.log('Script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 1');
}).then(() => {
  console.log('Promise 2');
});

console.log('Script end');

输出结果解释

Script start
Script end
Promise 1
Promise 2
setTimeout

• 'Script start' 和 'Script end' 是同步代码，按顺序立即执行。
• 'Promise 1' 和 'Promise 2' 是微任务，在当前任务完成后立即执行。
• 'setTimeout' 是宏任务，在微任务队列清空后执行。

通过理解这些基础概念和执行机制，可以有效管理和控制 JavaScript 脚本的执行顺序，解决实际开发中的问题。