JavaScript性能优化都优化什么

JavaScript 性能优化是一个综合性的课题，旨在提升代码的执行效率、减少资源消耗并改善用户体验。以下是 JavaScript 性能优化的主要方向和具体策略：

---

1. 代码层面优化

1.1 减少不必要的计算

• 避免重复计算：将频繁使用的计算结果缓存到变量中，避免重复执行。

// 优化前
function calculateTotal() {
  return array.length * 2 + array.reduce((sum, num) => sum + num, 0);
}

// 优化后
function calculateTotal() {
  const len = array.length; // 缓存长度
  const sum = array.reduce((sum, num) => sum + num, 0);
  return len * 2 + sum;
}

• 简化逻辑 ：减少嵌套的 if-else 或 switch 语句，使用更简洁的逻辑表达式。

1.2 优化循环

• 使用高效循环 ：优先使用 for 循环而非 forEach 或 for...in，因为它们通常更快。
• 避免循环内复杂操作：将循环外的计算移出循环。

// 优化前
for (let i = 0; i < array.length; i++) {
  const result = someComplexFunction(array[i]); // 循环内复杂计算
  // ...
}

// 优化后
const precomputed = array.map(someComplexFunction); // 循环外预处理
for (let i = 0; i < precomputed.length; i++) {
  // ...
}

1.3 减少 DOM 操作

• 批量操作 ：使用 DocumentFragment 或 requestAnimationFrame 批量更新 DOM，减少重绘和回流。

// 优化前
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  document.body.appendChild(div); // 频繁操作 DOM
}

// 优化后
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div); // 批量操作
}
document.body.appendChild(fragment);

2. 内存管理优化

2.1 避免内存泄漏

• 及时清理引用：移除事件监听器、定时器等，避免闭包中保留不必要的引用。

// 优化前：未清理的事件监听器
function setup() {
  const element = document.getElementById('btn');
  element.addEventListener('click', handleClick);
}

// 优化后：在组件卸载时清理
function setup() {
  const element = document.getElementById('btn');
  const handleClick = () => { /* ... */ };
  element.addEventListener('click', handleClick);
  return () => element.removeEventListener('click', handleClick); // 返回清理函数
}

2.2 使用弱引用

• WeakMap 和 WeakSet：在需要存储对象但又不希望阻止垃圾回收时使用。

const weakMap = new WeakMap();
const obj = {};
weakMap.set(obj, 'data'); // 不阻止 obj 被垃圾回收

3. 异步与并发优化

3.1 使用异步编程

• 避免阻塞主线程 ：使用 Promise、async/await 或 Web Workers 处理耗时任务。

// 优化前：同步阻塞
function fetchData() {
  const response = fetch('https://api.example.com/data');
  const data = response.json(); // 阻塞代码
  return data;
}

// 优化后：异步处理
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json(); // 非阻塞
  return data;
}

3.2 限制并发请求

• 使用任务队列：避免同时发起过多请求导致网络拥塞。

async function limitedConcurrentRequests(urls, maxConcurrent = 3) {
  const results = [];
  const executing = new Set();
  for (const url of urls) {
    const p = fetch(url).then(res => res.json());
    results.push(p);
    executing.add(p);
    p.finally(() => executing.delete(p));
    if (executing.size >= maxConcurrent) {
      await Promise.race(executing); // 等待任意一个请求完成
    }
  }
  return Promise.all(results);
}

4. 算法与数据结构优化

4.1 选择高效的数据结构

• 使用 Map 和 Set：在需要频繁查找、插入或删除时，它们的性能优于普通对象。

// 优化前：使用对象
const obj = {};
obj['key'] = 'value'; // 属性查找时间复杂度 O(n)

// 优化后：使用 Map
const map = new Map();
map.set('key', 'value'); // 查找时间复杂度 O(1)

4.2 优化算法复杂度

• 避免 O(n²) 算法：使用更高效的算法（如快速排序替代冒泡排序）。

---

5. 浏览器特性优化

5.1 使用 Web Workers

• 将计算密集型任务移至后台线程，避免阻塞 UI。

// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ task: 'heavy-computation' });
worker.onmessage = (e) => console.log('Result:', e.data);

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data.task);
  self.postMessage(result);
};

5.2 优化渲染性能

• 使用 will-change 属性：提前告知浏览器哪些元素会变化，优化渲染。

.element {
  will-change: transform, opacity; /* 提示浏览器优化 */
}

6. 工具与调试

6.1 使用性能分析工具

• Chrome DevTools：通过 Performance 面板分析代码瓶颈。
• Lighthouse：审计页面性能，提供优化建议。

6.2 代码压缩与打包

• 使用 Webpack、Rollup 等工具：压缩代码、移除未使用的代码（Tree Shaking）。

---

7. 其他优化技巧

• 避免使用 eval 和 new Function：它们会绕过 JavaScript 引擎的优化。
• 使用 const 和 let 替代 var：减少变量提升带来的性能开销。
• 缓存全局对象 ：如 document、window，避免频繁查找。

---

总结

JavaScript 性能优化的核心在于：

1. 减少不必要的计算和操作。
2. 优化内存使用，避免泄漏。
3. 利用异步编程和并发控制。
4. 选择高效的数据结构和算法。
5. 结合浏览器特性和工具进行调试。

通过以上策略，可以显著提升 JavaScript 应用的性能和用户体验。