作用域链过深会显著降低变量访问速度，因JavaScript引擎需逐级查找而非直接读取；可通过显式传参、缓存局部变量、避免循环内新建闭包及使用Object.freeze()等方法缩短作用域链。
闭包本身不拖慢执行速度，但当它导致作用域链过深时，变量访问就会变慢——尤其在高频渲染或密集计算场景中，这种开销会被显著放大。
作用域链变长会怎样
JavaScript 引擎对局部变量访问做了深度优化（比如寄存器缓存、内联缓存），一旦变量被闭包捕获，访问路径就从 直接读取 变成 沿作用域链逐级查找：从当前函数作用域 → 外层函数作用域 → 更外层……直到找到目标变量。每多一层，就多一次对象属性查找开销。
- Canvas 绘图循环中反复读取
ctx.lineWidth或data.x，若这些值来自多层嵌套闭包，JIT 无法内联优化，耗时明显上升 - SVG 动画里频繁调用
el.getAttribute('transform')，而该 el 被深层闭包持有，每次调用都要穿越三层作用域才能定位到引用 - DevTools Performance 面板中，“Function Call”子项耗时偏高，且堆栈显示大量
get property操作，就是典型信号
怎么判断是不是作用域链惹的祸
不用猜，用工具验证：
- 把疑似闭包内的变量显式传参（例如把
() => draw(ctx, x, y)改成draw(ctx, x, y)），对比 Performance 面板中对应函数的平均耗时变化 - 在 Sources 面板打断点，展开 Scope 面板，看当前函数的 Closure 下是否挂载了多层嵌套的
Closure (outer)、Closure (outer-outer) - 用
console.time()包裹关键变量访问语句，比如console.time('x-access'); x = closureData.x; console.timeEnd('x-access');，观察是否远高于预期
怎么让作用域链更短
核心思路是：减少“跨层借变量”，把需要的值提前拿到当前作用域。
- 在渲染循环入口处，把后续要用的值解构或缓存为局部变量：
const { x, y, color } = state;，再传给绘制函数 - 避免在
requestAnimationFrame回调里定义新函数，改用已声明的具名函数，防止每次帧都新建闭包并延长作用域链 - 对长期复用的配置对象（如动画参数、绘图样式），用
Object.freeze()+ 局部常量引用，阻止引擎为闭包保留冗余作用域
不复杂但容易忽略：变量访问快不快，不取决于“有没有闭包”，而取决于“要跳几层才能拿到”。控制好作用域深度，闭包就能既安全又高效。
