性能现状与技术选型

传统春节特效通常采用Canvas 2D或纯JS动画实现，在Redmi Note 11(骁龙680)设备上测试显示：

• 100个烟花粒子时FPS降至28
• 同时渲染5个灯笼出现明显卡顿
• 主线程占用率长期超过75%

现代方案采用混合渲染架构后：

1. WebGL处理80%的粒子特效
2. CSS Houdini负责矢量元素绘制
3. 物理计算移交Web Worker

同设备测试数据提升至稳定60FPS，主线程占用率低于30%。

核心模块实现

WebGL粒子系统（烟花特效）

顶点着色器关键代码：

// 爆炸阶段粒子加速度
uniform float uExplosionPhase;
void main() {
  vec3 newPosition = position;
  if(uExplosionPhase > 0.0) {
    newPosition.xyz += velocity * uExplosionPhase * 2.0;
    newPosition.y -= 9.8 * pow(uExplosionPhase, 2.0); // 重力模拟
  }
  gl_PointSize = 8.0 * (1.0 - smoothstep(0.0, 1.0, uExplosionPhase));
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

片段着色器使用噪声纹理实现光晕效果：

uniform sampler2D uNoiseTex;
void main() {
  vec2 uv = gl_PointCoord * 2.0 - 1.0;
  float radius = length(uv);
  if(radius > 1.0) discard;

  float noise = texture2D(uNoiseTex, gl_PointCoord).r;
  vec3 color = mix(
    vec3(1.0, 0.2, 0.1), 
    vec3(1.0, 0.8, 0.3),
    noise
  );
  gl_FragColor = vec4(color, 1.0 - pow(radius, 2.0));
}

CSS Houdini灯笼绘制

注册Paint Worklet：

CSS.paintWorklet.addModule('lantern-worker.js');

Worklet实现（节选）：

registerPaint('lantern', class {
  static get inputProperties() {
    return ['--lantern-color', '--swing-angle'];
  }

  paint(ctx, size, props) {
    const angle = parseFloat(props.get('--swing-angle')) * Math.PI/180;
    const centerX = size.width/2 + Math.sin(angle) * 5;

    // 灯笼主体
    ctx.beginPath();
    ctx.ellipse(centerX, size.height/2, 15, 20, 0, 0, Math.PI*2);
    ctx.fillStyle = props.get('--lantern-color').toString();
    ctx.fill();

    // 灯笼穗
    for(let i=0; i<8; i++) {
      const yOffset = 25 + i*3;
      ctx.beginPath();
      ctx.moveTo(centerX, yOffset);
      ctx.quadraticCurveTo(
        centerX + Math.sin(angle+i*0.2)*6, 
        yOffset+8,
        centerX + Math.sin(angle+i*0.3)*3,
        yOffset+15
      );
      ctx.strokeStyle = 'rgba(200,160,60,0.7)';
      ctx.stroke();
    }
  }
});

Web Worker物理计算

主线程与Worker通信协议：

interface PhysicsMessage {
  type: 'init' | 'update';
  payload: {
    particles?: Particle[];
    gravity?: number;
    deltaTime?: number;
  };
}

Worker内部采用Verlet积分算法：

function updateParticles(particles, deltaTime) {
  const deltaSq = deltaTime * deltaTime;

  particles.forEach(p => {
    const temp = {...p.position};

    // 位置更新
    p.position.x += 
      (p.position.x - p.previous.x) * 0.99 + 
      p.acceleration.x * deltaSq;

    p.position.y += 
      (p.position.y - p.previous.y) * 0.99 + 
      (p.acceleration.y - 9.8) * deltaSq;

    p.previous = temp;
    p.acceleration = {x:0, y:0};
  });
}

性能优化体系

合成层策略

1. 静态背景层：will-change: transform
2. 粒子特效层：独立Canvas + translateZ(0)
3. DOM动画层：contain: strict

内存管理

• WebGL纹理对象采用LRU缓存
• 粒子池实现对象复用
• 每5秒执行一次内存健康检查：

  function checkMemory() {
    if(window.performance.memory) {
      const ratio = window.performance.memory.usedJSHeapSize / 
                   window.performance.memory.jsHeapSizeLimit;
      if(ratio > 0.7) {
        triggerGarbageCollection();
      }
    }
  }

移动端适配方案

1. 检测设备等级：

   const deviceTier = 
     navigator.hardwareConcurrency * 0.6 + 
     navigator.deviceMemory * 0.4;

2. 降级策略对照表：

| 设备等级 | 粒子数量 | 物理精度 | 阴影质量 | |---------|---------|---------|---------| | Tier1 (≥3.5) | 1000 | 60Hz | PCF软阴影 | | Tier2 (≥2.0) | 500 | 30Hz | 硬阴影 | | Tier3 (<2.0) | 200 | 无物理 | 无阴影 |

生产环境检查清单

1. GPU内存泄漏检测
2. Chrome开发者工具 → Memory → 勾选"GPU"采样类型

3. 连续触发10次动画后观察内存增长曲线

4. 系统字体回退

   .lantern-text {
     font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
     @supports not (font-family: 'Noto Sans SC') {
       font-family: 'Microsoft YaHei', sans-serif;
     }
   }

5. 弱网环境处理

6. 使用Network Information API检测网络类型
7. 3G环境下自动关闭背景视频
8. 离线时展示静态SVG版本

完整实现可参考： - WebGL烟花CodePen - CSS灯笼CodePen

通过模块化设计，每个特效组件支持如下配置：

new Firework({
  container: '#animation-area',
  color: ['#ff3366', '#ff9933'],
  particleCount: 500, // 自动根据设备等级调整
  gravity: 0.8,
  autoDispose: true // 动画结束后自动清理
});