如何优化网页棕榈叶JS摇摆动画？寻求性能优化建议

你当前的代码实现了三片棕榈叶的摇摆效果，但存在重复代码、DOM查询冗余等问题，以下是具体优化方案，兼顾性能与可维护性：

核心优化点 #

• 复用DOM元素引用：直接使用创建好的DOM变量作为动画目标，避免每次动画都通过类名查询DOM，减少性能开销
• 批量创建叶子元素：用数组配置批量生成叶子节点，消除重复的创建、添加类名、追加节点代码
• 统一动画配置：把每片叶子的动画参数（旋转范围、时长、动画属性等）存入配置数组，通过遍历批量初始化动画，大幅减少重复代码
• 改用anime.js原生循环：替换complete回调递归调用的方式，使用loop: true配置，代码更简洁且避免递归可能的栈溢出风险
• 开启硬件加速：确保叶子元素的CSS设置will-change: transform，让浏览器用GPU处理动画，提升流畅度

优化后的完整代码 #

const background = document.querySelector(".leaf-background");

// 定义每片叶子的配置：类名、动画参数
const leafConfigs = [
  {
    className: "leaf-1",
    rotateZ: { min: -5, max: 5 },
    rotateX: { min: -30, max: 30 },
    duration: 3000
  },
  {
    className: "leaf-2",
    rotateX: { min: -40, max: 40 }, // 仅保留rotateX动画
    duration: 4000
  },
  {
    className: "leaf-3",
    rotateZ: { min: -2, max: 2 },
    rotateX: { min: -30, max: 30 },
    duration: 4000
  }
];

// 批量创建叶子并初始化动画
leafConfigs.forEach(config => {
  const leaf = document.createElement("div");
  leaf.classList.add(config.className);
  background.appendChild(leaf);

  // 初始化动画，使用loop替代递归complete回调
  anime({
    targets: leaf,
    rotateZ: config.rotateZ ? () => anime.random(config.rotateZ.min, config.rotateZ.max) : undefined,
    rotateX: () => anime.random(config.rotateX.min, config.rotateX.max),
    easing: "linear",
    duration: config.duration,
    loop: true
  });
});

额外性能提示 #

• 给叶子元素的CSS添加will-change: transform;，告诉浏览器提前准备硬件加速资源
• 若叶子是图片，优先使用WebP格式压缩文件大小，减少页面加载时间
• 避免在动画中修改除transform、opacity外的CSS属性，这些属性会触发页面重排重绘，影响动画流畅度

内容的提问来源于stack exchange，提问作者Joel Alexandersson