简单调整，JavaScript性能翻倍！前端工程师的效率秘籍！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 优化前的代码 */
var counter = 0;

function increment() {
    counter += 1;
}

function display() {
    console.log(counter);
}

increment();
display(); // 输出 1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* 优化后的代码（避免全局变量） */
var incrementCounter = (function() {
    var counter = 0;

    return {
        increment: function() {
            counter += 1;
        },
        display: function() {
            console.log(counter);
        }
    };
})();

incrementCounter.increment();
incrementCounter.display(); // 输出 1
// 在这个优化后的例子中，`counter`变量被包含在一个闭包中，外部代码不能直接访问`counter`。
// 这样做不仅减少了全局变量的使用，还提高了代码的模块性和可维护性。  

1
2
3
4
5

/* 优化前的代码 */
const dataArray = [/* 大量数据 */];
for (let i = 0; i < dataArray.length; i++) {
    // 对每个item应用函数
}

1
2
3
4
5
6
7

/* 优化后的代码 */
const dataArray = [/* 大量数据 */];
dataArray.forEach(item => {
   // 对每个item应用函数
});
// 与传统的`for`循环相比，`forEach`方法提供了更清晰、更简洁的语法，
// 同时在某些JavaScript引擎中也得到了优化。

1
2
3
4
5
6
7
8
9

/* 考虑一个需要频繁添加新元素到页面的场景。使用文档片段可以减少直接对DOM的操作次数： */
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const newElement = document.createElement('div');
    newElement.innerText = `Element ${i}`;
    fragment.appendChild(newElement);
}
document.body.appendChild(fragment);
// 这种方法首先在内存中构建所有新元素，并最终一次性添加到DOM中，从而减少了重绘和重排的次数。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 当处理耗时的数据操作时，可以将这部分工作移至Web Worker：
// 主线程
const worker = new Worker('worker.js');

worker.postMessage([/* 大量数据 */]);
worker.onmessage = function(event) {
    console.log('处理结果:', event.data);
};

// worker.js
onmessage = function(event) {
    const result = processData(event.data);
    postMessage(result);
};
// 这个例子展示了如何在Web Worker中处理数据，然后将结果返回给主线程，从而避免了主线程的阻塞。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 缓存函数的计算结果，尤其是在处理复杂计算时，可以显著提升性能：
function complexCalculation(input) {
    if (!complexCalculation.cache) {
        complexCalculation.cache = {};
    }

    if (!complexCalculation.cache[input]) {
        // 假设这里是一些复杂的计算
        complexCalculation.cache[input] = /* 计算结果 */;
    }

    return complexCalculation.cache[input];
}
// 这里我们使用了函数属性来存储缓存结果，避免了对同一输入的重复计算。