web 移动端开发中 JavaScript 代码执行顺序是如何设计的

在Web移动端开发中，JavaScript代码的执行顺序是由事件循环机制、调用栈、任务队列决定的。它遵循同步代码先执行的原则，异步代码通过事件触发、调用回调的方式执行。异步操作主要包括定时器、网络请求、事件监听等。其中，事件循环是维持JavaScript代码执行顺序的关键。

事件循环是指JavaScript解释器等待任务、执行任务和休眠等待更多任务这一循环过程。一旦调用栈空闲，它就会查看任务队列中是否有待处理的任务。这些任务分为宏任务（如setTimeout, setInterval, I/O, UI rendering）和微任务（如Promise, process.nextTick, Object.observe）两类。先执行宏任务中的一个，然后执行所有微任务，完成后再回到宏任务，如此循环。微任务的执行时机是在当前宏任务执行完毕后、在取出下一个宏任务前执行。

一、同步和异步任务

同步任务

同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。这种模式保证了执行顺序的一致性和可预测性。

异步任务

异步任务则不会等待，而是将这些任务挂起，并继续执行后面的同步任务。一旦异步操作完成（如数据返回），则它们对应的回调函数会被推进任务队列等待执行。

二、事件循环和任务队列

事件循环

顾名思义，事件循环是程序的执行过程中不断循环的机制。这个机制决定了JavaScript代码的执行时机和顺序，它是异步编程的核心概念。

任务队列

事件循环会维护一个或多个任务队列，当事件触发或者异步操作完成时，相关的回调函数就会被放入任务队列中。事件循环工作时会不断检查这些队列，一旦主线程的执行栈为空，它就会取出任务队列中的下一个任务来执行。

三、宏任务和微任务

宏任务（MacroTasks）

宏任务是指那些可以分别独立执行的任务，包括整体的脚本代码、setTimeout、setInterval、I/O、UI Rendering等。

微任务（MicroTasks）

相反，微任务通常是需要在更细的级别上进行调度的任务。它们的执行时机是在当前执行栈执行完毕后、下一个宏任务开始前。微任务包括Promise.then、MutationObserver、process.nextTick（Node.js环境）等。

四、任务执行顺序实例讲解

以定时器和Promise的组合使用为例，来详细说明代码执行顺序：

console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
    console.log('promise1');
}).then(function() {
    console.log('promise2');
});
console.log('script end');