【JavaScript 性能优化方法】

JavaScript 性能优化方法

减少 DOM 操作

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

复制代码
const fragment = 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) {
  const result = 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');
相关推荐
fat house cat_19 分钟前
【netty】基于主从Reactor多线程模型|如何解决粘包拆包问题|零拷贝
java·服务器·网络·netty
青云交39 分钟前
Java 大视界 -- Java 大数据在智能教育学习社区互动模式创新与用户活跃度提升中的应用(426)
java·大数据·学习·flink 实时计算·智能教育社区·互动模式创新·用户活跃度
神奇的海马体1 小时前
Tomcat隐藏版本号
java·tomcat
拜见老天師1 小时前
使用mybatis-plus,实现将排序时,字段值为NULL的数据排在最后
java·mybatis
应茶茶2 小时前
C++11 核心新特性:从语法重构到工程化实践
java·开发语言·c++
Reggie_L2 小时前
RabbitMQ -- 高级特性
java·rabbitmq·java-rabbitmq
lang201509283 小时前
Spring空安全指南:告别空指针异常
java·安全·spring
学到头秃的suhian3 小时前
Java内存区域
java·jvm
栗子飞啊飞4 小时前
如何实现大模型 “边生成边显示“
java·deepseek