function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
避免在循环中频繁操作DOM，利用文档片段（DocumentFragment）批量更新
javascript复制代码
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const element = document.createElement('div');
fragment.appendChild(element);
}
document.body.appendChild(fragment);
数据结构与算法优化
选择合适的数据结构（如Map代替普通对象存储键值对）
避免嵌套循环，优化算法时间复杂度
使用Web Workers处理密集型计算任务
网络请求优化
合并多个小文件（如CSS、JS）减少HTTP请求
使用懒加载（Lazy Loading）延迟加载非关键资源
预加载关键资源（<link rel="preload">）
渲染性能优化
减少重排（Reflow）与重绘（Repaint），使用transform替代top/left
使用requestAnimationFrame优化动画性能
javascript复制代码
function animate() {
element.style.transform = `translateX(${position}px)`;
position += 1;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);