JavaScript性能优化实战，日常开发中的案例与优化技巧-三、循环与递归优化

1. 案例：大数据量遍历

问题：在循环中执行复杂计算会导致主线程阻塞。

低效代码：

const data = Array.from({ length: 1000000 }, (_, i) => i);  
let sum = 0;  
data.forEach(num => {  
    sum += num * 2; // 复杂计算  
});  
console.log(sum);  

问题分析：大数据量遍历会占用大量CPU资源，导致页面卡顿。

优化方案：

• 使用Web Workers将计算任务放到后台线程。

优化代码：

// 主线程代码  
const worker = new Worker('worker.js');  
worker.postMessage({ data: Array.from({ length: 1000000 }, (_, i) => i) });  
worker.onmessage = (event) => {  
    console.log('Sum:', event.data);  
};  

// worker.js  
self.onmessage = (event) => {  
    const data = event.data.data;  
    let sum = 0;  
    data.forEach(num => {  
        sum += num * 2;  
    });  
    self.postMessage(sum);  
};  

---

2. 案例：递归深度过大

问题：递归深度过大会导致栈溢出。

低效代码：

function factorial(n) {  
    if (n === 1) return 1;  
    return n * factorial(n - 1);  
}  
console.log(factorial(10000)); // 栈溢出  

问题分析：递归调用栈过深，超出浏览器限制。

优化方案：

• 使用尾递归优化（需浏览器支持）。
• 使用循环替代递归。

优化代码：

function factorial(n, acc = 1) {  
    if (n === 1) return acc;  
    return factorial(n - 1, n * acc);  
}  
console.log(factorial(10000));  

---