8.1 JavaScript 执行机制JavaScript 执行机制是前端异步编程、性能优化的底层核心基于单线程执行模型通过调用栈管理同步代码的执行顺序配合事件循环与任务队列实现异步任务的调度。理解这一整套机制是掌握异步编程、排查性能问题、理解浏览器运行逻辑的基础。8.1.1 调用栈与执行上下文一、执行上下文Execution Context执行上下文是 JavaScript 执行代码的运行环境包含了当前代码执行所需的全部信息变量声明、函数声明、this 指向、词法作用域等所有代码都必须在执行上下文中运行。主要分为两类全局执行上下文程序启动时自动创建全局作用域的代码都在此上下文中执行一个页面仅存在一个。函数执行上下文每次函数被调用时创建对应函数内部代码的执行环境函数执行完毕后自动销毁。二、调用栈Call Stack调用栈是管理执行上下文的栈结构遵循**后进先出LIFO**原则控制代码的执行顺序。函数被调用时对应的函数执行上下文被压入栈顶开始执行函数内部代码。函数执行完成return 或代码执行完毕执行上下文从栈顶弹出控制权交还给上一层上下文。三、执行流程示例function fn2() { console.log(fn2 执行); } function fn1() { console.log(fn1 开始); fn2(); console.log(fn1 结束); } fn1(); console.log(全局代码执行);完整入栈出栈流程全局执行上下文入栈执行全局代码调用fn1()fn1执行上下文入栈执行函数代码打印「fn1 开始」调用fn2()fn2执行上下文入栈执行函数代码打印「fn2 执行」fn2执行完毕上下文出栈回到fn1执行上下文fn1继续执行打印「fn1 结束」执行完毕后上下文出栈回到全局执行上下文打印「全局代码执行」四、栈溢出Stack Overflow浏览器对调用栈有最大深度限制当函数嵌套调用过深、递归没有终止条件时会超出栈容量抛出栈溢出错误。// 无限递归导致栈溢出 function recursion() { recursion(); } recursion(); // Uncaught RangeError: Maximum call stack size exceeded8.1.2 单线程与任务队列一、单线程模型JavaScript 核心引擎是单线程执行的即同一时间只能执行一段 JS 代码。设计原因DOM安全JS 最初作为浏览器脚本语言核心能力是 DOM 操作多线程会引发 DOM 操作冲突如一个线程修改节点、一个线程删除节点单线程从根源上避免了并发问题。简化设计单线程无需处理复杂的线程同步、锁机制大幅降低了语言复杂度与开发门槛。核心局限耗时的同步操作大循环、复杂计算、同步 IO会阻塞主线程导致页面渲染卡顿、用户交互无响应。二、浏览器的多线程辅助JS 引擎单线程 ≠ 浏览器单线程。浏览器提供了多个独立的辅助线程负责处理异步任务与 JS 主线程协同工作定时器线程处理setTimeout/setInterval的计时逻辑网络请求线程处理 Ajax、fetch 等 HTTP 请求的收发DOM 事件线程监听用户交互事件点击、滚动、键盘输入等文件读取线程处理FileReader等本地 IO 操作这些线程完成任务后不会直接执行回调而是将回调函数放入任务队列等待主线程调度执行。三、任务队列Task Queue / Message Queue任务队列是存放待执行回调函数的队列遵循**先进先出FIFO**原则。 所有异步任务的回调定时器、事件、网络请求等处理完成后都会被添加到任务队列末尾排队等待主线程调用是异步编程的缓冲机制。8.1.3 事件循环核心流程事件循环Event Loop是 JavaScript 异步调度的核心机制负责协调调用栈与任务队列持续循环调度代码执行是单线程下实现异步的核心。一、核心执行流程执行同步代码优先执行调用栈中的所有同步代码直到调用栈完全清空。检查任务队列调用栈清空后从任务队列头部取出第一个待执行的回调函数。执行回调将取出的回调压入调用栈执行执行完成后调用栈再次清空。循环往复重复上述步骤不断检查任务队列、执行任务形成永久循环。二、核心特点同步代码永远优先于异步回调执行。一次事件循环仅执行一个任务队列中的任务执行完后回到调用栈清空后再取下一个。任务队列中的任务必须等待调用栈清空才能执行因此定时器、网络请求的回调时间都不是绝对精确的。三、经典示例定时器的执行时机console.log(同步代码1); setTimeout(() { console.log(定时器回调); }, 0); console.log(同步代码2);执行结果同步代码1同步代码2定时器回调原因即使定时器延迟设为 0回调也会被放入任务队列必须等同步代码执行完毕、调用栈清空后才会被事件循环调度执行。四、进阶宏任务与微任务事件循环中任务分为两类执行优先级不同是理解异步执行顺序的核心细节任务类型包含场景执行优先级宏任务MacroTask整体脚本代码、setTimeout、setInterval、DOM 事件、网络请求、I/O低每轮执行一个微任务MicroTaskPromise.then/catch/finally、MutationObserver、queueMicrotask高每轮全部清空执行顺序规则每次执行完一个宏任务后会先清空当前所有微任务队列再执行下一个宏任务。微任务会在当前宏任务结束后、下一个宏任务开始前全部执行完毕。
