本文共 2184 字，大约阅读时间需要 7 分钟。
在学习JavaScript时，很多开发者会遇到一个难以理解的问题：代码中某些操作会导致输出顺序与预期不符。例如，以下代码：
console.log(1); setTimeout(() => { console.log(2)}, 0); console.log(3); 打印的顺序是1、3、2，而不是我们直觉上认为的1、2、3。这一现象的背后是JavaScript的单线程执行机制和事件循环机制的深层原理。接下来，我们将从基础到高级深入探讨JavaScript的运行机制。
单线程指的是在同一时间内，只能执行一项任务。JavaScript选择单线程作为其主要执行模型的原因在于其主要用于与用户交互和操作DOM（文档对象模型）。如果采用多线程，会引入复杂的同步问题，例如同时修改DOM时可能导致的数据不一致。
单线程意味着所有任务必须排队等待前一个任务完成才能执行。这种机制虽然简单，但在处理大量异步任务时可能导致性能问题。因此，JavaScript引入了任务队列来处理异步任务。
任务队列是用来管理异步任务的容器。异步任务被分为两类：
console.log()、DOM操作等。setTimeout()、网络请求等，这些任务会被放入任务队列中，等待主线程空闲时执行。任务队列中的任务按照先进先出的原则执行。当主线程完成所有同步任务后，会去任务队列中取出最早的异步任务进行执行。
Event Loop是JavaScript执行异步任务的核心机制。它的执行过程可以分为以下几个阶段：
宏任务包括：
setTimeout()setInterval()setImmediate()微任务包括：
process.nextTick()MutationObserver以下代码：
setTimeout(() => { console.log('a');}, 0);Promise.resolve().then(() => { console.log('b');}).then(() => { Promise.resolve('c').then((data) => { setTimeout(() => { console.log('d'); }, 0); console.log('e'); return data; }).then((data) => { console.log(data); });new Promise((resolve) => { console.log('f'); resolve('g');}).then((res) => { console.log(res);});console.log('h'); 将打印出：f, h, b, g, e, c, a, d。这是因为：
console.log('h')是主线程中的同步任务，立即执行。f是Promise中的同步代码，立即执行。b和g是同一个then链中的微任务，按顺序执行。e和c是then链中的同步操作。a和d由setTimeout触发，按顺序执行。以下代码：
console.log(1);let a = setTimeout(() => { console.log(2);}, 0);console.log(3);Promise.resolve(4).then(() => { console.log(b); clearTimeout(a);});console.log(5); 打印结果为：1, 3, 5, 4。原因在于：
console.log(1)和console.log(3)是同步任务，按顺序执行。setTimeout生成的a被立即放入任务队列。Promise.resolve(4)生成一个新的then，在clearTimeout(a)之前执行。clearTimeout(a)确保在a执行完成后取消定时任务。通过以上分析，我们可以清晰地理解JavaScript事件循环机制的运行原理及其在实际开发中的应用。掌握这些知识对于优化和调试JavaScript代码至关重要。
转载地址：http://wgni.baihongyu.com/