背景痛点

传统CSS动画在实现春节特效时，当元素数量超过500（如烟花粒子）就会遇到明显性能问题。在测试中发现：

• 使用box-shadow模拟烟花时，Chrome帧率从60FPS暴跌至12FPS
• 移动端浏览器出现触摸事件延迟，导致交互卡顿
• 复杂动画导致主线程阻塞，出现UI无响应警告

技术选型对比

通过实际测试得出数据对比：

| 方案 | 万粒子性能 | GPU占用 | 内存消耗 | 开发成本 | |-------------|------------|---------|----------|----------| | CSS3 | 8FPS | 低 | 800MB | ★★ | | Canvas2D | 35FPS | 中 | 1.2GB | ★★★ | | WebGL | 60FPS | 高 | 500MB | ★★★★ |

核心实现

WebGL粒子系统

class FireworkParticle {
  private gl: WebGLRenderingContext;
  private positionBuffer: WebGLBuffer;

  constructor(gl: WebGLRenderingContext) {
    this.gl = gl;
    // 初始化粒子位置缓冲区
    this.positionBuffer = gl.createBuffer()!;
  }

  // 重力模拟（每帧更新）
  updatePhysics(deltaTime: number) {
    particles.forEach(p => {
      p.velocity.y += -9.8 * deltaTime; // 重力加速度
      p.position.x += p.velocity.x * deltaTime;
      p.position.y += p.velocity.y * deltaTime;
    });
  }
}

分层渲染策略

1. 背景层：静态节日背景（使用普通Canvas绘制）
2. 粒子层：WebGL渲染的烟花/雪花
3. UI层：DOM实现的按钮和文字

移动端优化

// 触摸事件节流处理
let lastTouchTime = 0;
container.addEventListener('touchmove', (e) => {
  const now = Date.now();
  if (now - lastTouchTime > 32) { // 30FPS节流
    handleTouchMove(e);
    lastTouchTime = now;
  }
}, { passive: true });

性能优化实战

使用Chrome Performance工具分析后采取以下措施：

1. 将粒子计算转移到WebWorker
2. 使用OffscreenCanvas进行离屏渲染
3. 实现纹理对象池复用

// WebWorker配置示例
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({
  type: 'init',
  canvas: offscreen
}, [offscreen]);

避坑指南

• iOS Safari：需要手动触发touchstart事件才能启动requestAnimationFrame
• 纹理回收：在WebGL上下文丢失时自动释放纹理内存
• 降级策略：通过navigator.hardwareConcurrency判断CPU核心数启用简化效果

开放性问题

当前灯笼飘动使用CSS关键帧动画实现，存在路径生硬的问题。是否可以考虑：

1. 使用Verlet积分算法模拟布料物理
2. 通过风力场驱动运动轨迹
3. 结合曲线路径生成器实现自然摆动

期待大家在评论区分享实现方案！