巧用局部变量提升JavaScript性能

凌晨两点半

发布时间：2026-10-15 | 5人浏览过

原创

在 JavaScript 开发中，变量访问速度与它们在作用域链中的位置密切相关。理解并利用这一特性，通过合理的局部变量缓存策略，可以有效减少引擎的作用域链遍历开销，从而显著提升代码的执行效率。

JavaScript 变量作用域与性能的关系

JavaScript 引擎在执行代码时，需要通过作用域链（Scope Chain）来解析变量。规则如下：

本地变量最快：局部变量位于当前执行上下文的词法环境中，访问路径最短，读取速度最快。
外部变量较慢：外层函数的变量需要向上逐层查找。
全局变量最慢：当引用一个非本地变量时，JavaScript 必须从当前函数的作用域开始，沿着作用域链逐级向上搜索，直到找到该变量或到达全局对象。全局对象（如 window 或 global）位于作用域链的最顶层，因此读写全局变量的过程通常是最耗时的。

核心优化策略

基于上述原理，JavaScript 性能优化的一个黄金法则是：如果某个跨作用域的值（尤其是全局对象属性或 DOM 元素）在一个函数中被引用一次以上，就应该将其存储到一个局部变量中。

这样做可以消除重复的作用域链搜索，让后续多次使用只需指向内存中已分配的局部引用。

第 1 步：分析未优化的代码模式

在许多前端项目中，开发者习惯直接在函数内部反复调用 document 的属性或方法。例如，在初始化用户界面（UI）的逻辑中：

// 优化前
function initUI () {
    var bd = document.body,
        links = document.getElementsByTagName("a"),
        i=0,
        len=links.length;

    while(i < len){
        update(links[i++]);
    }

    document.getElementById("go-btn").onclick = function(){
        start();
    }

    bd.className = "active";
}

性能瓶颈：在该函数中，document 被直接引用了三次。由于 document 是全局对象的一个属性，每次访问都需要重新进行完整的作用域链查找。

第 2 步：实施局部变量缓存优化

为了减少性能影响，我们首先在全局作用域之外创建一个局部变量（如 doc），用于保存 document 对象的引用。随后，函数内的所有操作都改用这个局部变量：

// 优化后
function initUI () {
    // 将全局对象存为局部变量
    var doc = document,
        bd = doc.body,
        links = doc.getElementsByTagName("a"),
        i=0,
        len=links.length;

    while(i < len){
        update(links[i++]);
    }

    doc.getElementById("go-btn").onclick = function(){
        start();
    }

    bd.className = "active";
}