JavaScript性能优化实战大纲

性能优化的核心目标

• 减少页面加载时间
• 降低内存消耗
• 提升代码执行效率

代码层面的优化

减少DOM操作

避免频繁的DOM访问和修改，使用文档片段（DocumentFragment）或离线DOM进行批量操作。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const node = document.createElement('div');
    fragment.appendChild(node);
}
document.body.appendChild(fragment);

避免全局变量污染

使用模块化（如ES6模块）或闭包减少全局变量的使用。

(function() {
    let localVar = '局部变量';
})();

事件委托

减少事件监听器的数量，利用事件冒泡机制。

document.getElementById('parent').addEventListener('click', (e) => {
    if (e.target.matches('button')) {
        console.log('按钮被点击');
    }
});

资源加载优化

异步加载脚本

使用async或defer属性优化脚本加载。

<script src="script.js" async></script>

懒加载非关键资源

延迟加载图片、视频等资源，优先加载核心内容。

<img data-src="image.jpg" loading="lazy" alt="示例图片">

内存管理

避免内存泄漏

及时清除不再使用的定时器、事件监听器和引用。

const timer = setInterval(() => {}, 1000);
// 不需要时清除
clearInterval(timer);

弱引用优化

使用WeakMap或WeakSet管理临时数据。

const weakMap = new WeakMap();
const obj = {};
weakMap.set(obj, '临时数据');

渲染性能优化

减少重绘和回流

使用transform和opacity触发GPU加速，避免频繁修改样式。

.element {
    transform: translateZ(0);
}

使用requestAnimationFrame

优化动画性能，避免直接使用setTimeout或setInterval。

function animate() {
    // 动画逻辑
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

工具与实践

性能分析工具

• Chrome DevTools的Performance和Memory面板
• Lighthouse生成性能报告

代码拆分与Tree Shaking

使用Webpack或Rollup等工具移除未使用的代码。

// 动态导入模块
import('./module.js').then(module => {
    module.doSomething();
});

总结与进阶

• 持续监控性能指标
• 结合具体业务场景选择优化策略