JavaScript性能优化2025.4最新

以下是一些 JavaScript 性能优化的方法:

1. 减少全局变量的使用

全局变量会增加作用域链查找的时间,并且可能引发命名冲突。尽量使用局部变量。

// 不好的做法
var globalVar = 10;
function test() {
    console.log(globalVar);
}

// 好的做法
function test() {
    var localVar = 10;
    console.log(localVar);
}

2. 缓存 DOM 查询结果

多次查询同一个 DOM 元素会影响性能,应该将查询结果缓存起来。

// 不好的做法
for (var i = 0; i < 10; i++) {
    document.getElementById('myElement').style.color = 'red';
}

// 好的做法
var myElement = document.getElementById('myElement');
for (var i = 0; i < 10; i++) {
    myElement.style.color = 'red';
}

3. 避免频繁的 DOM 操作

DOM 操作是比较昂贵的,尽量批量操作 DOM。

// 不好的做法
for (var i = 0; i < 10; i++) {
    var newElement = document.createElement('div');
    document.body.appendChild(newElement);
}

// 好的做法
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
    var newElement = document.createElement('div');
    fragment.appendChild(newElement);
}
document.body.appendChild(fragment);

4. 节流和防抖

对于一些高频触发的事件(如滚动、窗口大小改变等),使用节流和防抖技术可以减少不必要的函数调用。

// 防抖函数
function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

// 节流函数
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const context = this;
        const args = arguments;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

5. 优化循环

避免在循环中进行复杂的计算,尽量减少循环次数。

// 不好的做法
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// 好的做法
var arr = [1, 2, 3, 4, 5];
var len = arr.length;
for (var i = 0; i < len; i++) {
    console.log(arr[i]);
}