代码性能优化（Code Performance Optimization）
代码层面的性能优化技巧。
📚 优化策略
1. 减少 DOM 操作
// ❌ 错误：频繁操作 DOM
for (let i = 0; i < 1000; i++) {
document.getElementById('list').innerHTML += `<li>Item ${i}</li>`;
}
// ✅ 正确：批量操作
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);2. 使用事件委托
// ❌ 错误：为每个元素绑定事件
items.forEach(item => {
item.addEventListener('click', handleClick);
});
// ✅ 正确：事件委托
container.addEventListener('click', (e) => {
if (e.target.matches('.item')) {
handleClick(e.target);
}
});3. 防抖和节流
// 防抖：延迟执行
function debounce(fn, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), delay);
};
}
// 节流：限制执行频率
function throttle(fn, delay) {
let lastCall = 0;
return function(...args) {
const now = Date.now();
if (now - lastCall >= delay) {
lastCall = now;
return fn.apply(this, args);
}
};
}4. 避免全局查找
// ❌ 错误：重复查找
function process() {
for (let i = 0; i < items.length; i++) {
document.getElementById('result').innerHTML += items[i];
}
}
// ✅ 正确：缓存查找结果
function process() {
const result = document.getElementById('result');
const itemsLength = items.length;
for (let i = 0; i < itemsLength; i++) {
result.innerHTML += items[i];
}
}5. 使用合适的循环
// for 循环通常最快
for (let i = 0; i < array.length; i++) {
// 处理
}
// for...of 可读性好
for (const item of array) {
// 处理
}
// forEach 函数式，但较慢
array.forEach(item => {
// 处理
});6. 优化条件判断
// ✅ 将最可能为真的条件放在前面
if (likelyCondition) {
// 处理
} else if (unlikelyCondition) {
// 处理
}
// ✅ 使用 switch 处理多个条件
switch (value) {
case 'a':
// 处理
break;
case 'b':
// 处理
break;
}7. 使用 Web Workers
// 主线程
const worker = new Worker('worker.js');
worker.postMessage({ data: largeData });
worker.onmessage = (e) => {
console.log('Result:', e.data);
};
// worker.js
self.onmessage = (e) => {
const result = processLargeData(e.data.data);
self.postMessage(result);
};8. 懒加载和代码分割
// 动态导入
const module = await import('./heavy-module.js');
// React 懒加载
const HeavyComponent = lazy(() => import('./HeavyComponent'));💡 数据结构优化
1. 选择合适的集合
// Set 用于快速查找
const uniqueItems = new Set(items);
// Map 用于键值对
const cache = new Map();
// Array 用于有序列表
const list = [];2. 避免不必要的数组操作
// ❌ 错误：多次遍历
const doubled = numbers.map(n => n * 2);
const filtered = doubled.filter(n => n > 10);
const sum = filtered.reduce((a, b) => a + b, 0);
// ✅ 正确：一次遍历
let sum = 0;
for (const n of numbers) {
const doubled = n * 2;
if (doubled > 10) {
sum += doubled;
}
}🔧 算法优化
1. 使用合适的算法
// 查找：使用 Map 而不是数组
const map = new Map();
map.set('key', 'value');
map.get('key'); // O(1)
// 排序：使用原生 sort
array.sort((a, b) => a - b);2. 缓存计算结果
// 记忆化
function memoize(fn) {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = fn.apply(this, args);
cache.set(key, result);
return result;
};
}🔗 相关链接
参考：