当前位置：首页 > news >正文

JavaScript性能优化实战指南

news 2025/8/12 0:39:32

一、DOM操作优化

批量操作DOM

// 低效方式
for(let i=0; i<1000; i++){document.body.appendChild(document.createElement('div'));
}// 高效方式
const fragment = document.createDocumentFragment();
for(let i=0; i<1000; i++){fragment.appendChild(document.createElement('div'));
}
document.body.appendChild(fragment);

缓存DOM查询结果

// 低效
for(let i=0; i<10; i++){document.getElementById('box').style.color = 'red';
}// 高效
const box = document.getElementById('box');
for(let i=0; i<10; i++){box.style.color = 'red';
}

二、事件处理优化

事件委托

// 低效
document.querySelectorAll('li').forEach(li => {li.addEventListener('click', handler);
});// 高效
document.querySelector('ul').addEventListener('click', (e) => {if(e.target.tagName === 'LI') handler(e);
});

防抖与节流

// 防抖
function debounce(fn, delay=300) {let timer;return (...args) => {clearTimeout(timer);timer = setTimeout(() => fn(...args), delay);};
}// 节流
function throttle(fn, delay=300) {let last = 0;return (...args) => {const now = Date.now();if(now - last > delay) {fn(...args);last = now;}};
}

三、内存管理

及时解除引用

// 内存泄漏示例
function createClosure() {const bigData = new Array(1000000);return () => console.log(bigData.length);
}// 正确释放
let closure;
function setup() {const bigData = new Array(1000000);closure = () => console.log(bigData.length);
}
function teardown() {closure = null;
}

WeakMap使用

const wm = new WeakMap();
let obj = {};
wm.set(obj, 'metadata');
obj = null; // 自动清除关联数据

四、渲染性能优化

减少重排

// 低效
element.style.width = '100px';
element.style.height = '200px';
element.style.left = '10px';// 高效
element.classList.add('optimized-style');

使用requestAnimationFrame

function animate() {element.style.transform = `translateX(${position}px)`;position += 1;requestAnimationFrame(animate);
}

五、网络优化

代码分割

// 动态导入
button.addEventListener('click', async () => {const module = await import('./heavyModule.js');module.doSomething();
});

资源预加载

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page-data.json" as="fetch">

六、性能检测工具

Performance API

function measure() {performance.mark('start');// 执行待测代码performance.mark('end');performance.measure('total', 'start', 'end');console.log(performance.getEntriesByName('total'));
}

Web Workers

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);// worker.js
self.onmessage = ({data}) => {const result = processData(data);self.postMessage(result);
};

优化建议优先级：