JavaScript 性能优化方法

减少 DOM 操作

频繁的 DOM 操作会导致浏览器重绘和回流，影响性能。使用文档片段（DocumentFragment）或虚拟 DOM 技术减少直接操作。

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

事件委托

减少事件监听器的数量，利用事件冒泡机制将事件处理程序委托到父元素。

document.getElementById(parent).addEventListener(click, function(e) { if(e.target.matches(li)) { console.log(List item clicked); } });

避免全局查找

将全局变量缓存到局部变量中，减少作用域链查找时间。

function updateElements() { const doc = document; // 缓存全局变量 const divs = doc.getElementsByTagName(div); // 后续操作 }

使用节流和防抖

对于频繁触发的事件（如滚动、输入），使用节流（throttle）和防抖（debounce）限制执行频率。

function debounce(func, delay) { let timeout; return function() { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, arguments), delay); }; }

优化循环

减少循环中的计算量，避免在循环中执行 DOM 操作或重复计算。

// 预先计算数组长度 const arr = [1, 2, 3]; const len = arr.length; for (let i = 0; i < len; i++) { console.log(arr[i]); }

使用 Web Workers

将 CPU 密集型任务放到 Web Workers 中执行，避免阻塞主线程。

// 主线程 const worker = new Worker(worker.js); worker.postMessage(data); worker.onmessage =function(e) { console.log(e.data); }; // worker.js self.onmessage = function(e) { constresult = heavyTask(e.data);self.postMessage(result); };

代码压缩和懒加载

使用工具如 Webpack 或 Rollup 进行代码压缩和分割，按需加载资源。

// 动态导入实现懒加载 import(./module.js).then(module => { module.init(); });

避免内存泄漏

及时清除定时器、事件监听器和引用，防止内存泄漏。

// 清除定时器 const timer = setInterval(() => {}, 1000); clearInterval(timer); // 移除事件监听器element.removeEventListener(click, handler);

使用性能分析工具

借助 Chrome DevTools 的 Performance 和 Memory 面板，定位性能瓶颈。

console.time(test);// 测试代码 console.timeEnd(test);