【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');
相关推荐
ccccczy_21 小时前
Spring Security 深度解读:JWT 无状态认证与权限控制实现细节
java·spring security·jwt·authentication·authorization·securityfilterchain·onceperrequestfilter
Lin_Aries_042121 小时前
容器化 Tomcat 应用程序
java·linux·运维·docker·容器·tomcat
sheji341621 小时前
【开题答辩全过程】以 springboot高校社团管理系统的设计与实现为例,包含答辩的问题和答案
java·spring boot·后端
zzywxc7871 天前
大模型落地实践指南:从技术路径到企业级解决方案
java·人工智能·python·microsoft·golang·prompt
相与还1 天前
IDEA+SpringBoot实现远程DEBUG到本机
java·spring boot·intellij-idea
小杨勇敢飞1 天前
IDEA 2024 中创建 Maven 项目的详细步骤
java·ide·intellij-idea
野犬寒鸦1 天前
从零起步学习Redis || 第四章:Cache Aside Pattern(旁路缓存模式)以及优化策略
java·数据库·redis·后端·spring·缓存
白水先森1 天前
C语言作用域与数组详解
java·数据结构·算法
草莓熊Lotso1 天前
从 “Hello AI” 到企业级应用:Spring AI 如何重塑 Java 生态的 AI 开发
java·人工智能·经验分享·后端·spring
doulbQuestion1 天前
【无标题】
java·spring