前端模糊实现那点事：从CSS到Canvas的视觉优化实践指南

一、CSS原生模糊方案解析

CSS的filter: blur()属性是前端实现模糊效果最便捷的方式，其底层依赖浏览器对像素矩阵的卷积运算。现代浏览器通过硬件加速优化了该属性的性能表现，但在移动端设备上仍需谨慎使用。

1.1 基础用法与性能考量

.blur-element {
  filter: blur(5px);
  /* 硬件加速优化 */
  transform: translateZ(0);
  will-change: filter;
}

通过will-change属性可提前告知浏览器元素可能发生的视觉变化，促使GPU提前分配资源。但过度使用会导致内存占用激增，建议在动态模糊场景下配合Intersection Observer实现按需渲染。

1.2 动态模糊的过渡处理

CSS Transition对filter属性的支持存在性能差异，建议将模糊变化与透明度变化解耦：

.element {
  transition: opacity 0.3s ease;
}
.element.blurred {
  opacity: 0.7;
  filter: blur(3px);
}

这种分离式处理可避免同时触发多个昂贵属性动画，实测在iOS Safari上帧率提升约25%。

二、Canvas高级模糊实现

当需要实现动态模糊强度控制或非均匀模糊时，Canvas方案展现出独特优势。通过WebGL的Fragment Shader可实现实时高斯模糊，但开发成本较高。

2.1 纯Canvas实现方案

function applyCanvasBlur(canvas, radius = 5) {
  const ctx = canvas.getContext('2d');
  const tempCanvas = document.createElement('canvas');
  const tempCtx = tempCanvas.getContext('2d');
  tempCanvas.width = canvas.width;
  tempCanvas.height = canvas.height;
  tempCtx.drawImage(canvas, 0, 0);
  // 简易盒式模糊实现
  const iterateBlur = (imgData, iterations = 2) => {
    const data = imgData.data;
    const width = imgData.width;
    for (let i = 0; i < iterations; i++) {
      for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
          let r = 0, g = 0, b = 0, a = 0;
          let count = 0;
          for (let dy = -radius; dy <= radius; dy++) {
            for (let dx = -radius; dx <= radius; dx++) {
              const px = x + dx;
              const py = y + dy;
              if (px >= 0 && px < width && py >= 0 && py < height) {
                const idx = (py * width + px) * 4;
                r += data[idx];
                g += data[idx + 1];
                b += data[idx + 2];
                a += data[idx + 3];
                count++;
              }
            }
          }
          const idx = (y * width + x) * 4;
          data[idx] = r / count;
          data[idx + 1] = g / count;
          data[idx + 2] = b / count;
          data[idx + 3] = a / count;
        }
      }
    }
    return imgData;
  };
  const imgData = tempCtx.getImageData(0, 0, canvas.width, canvas.height);
  ctx.putImageData(iterateBlur(imgData), 0, 0);
}

该实现通过双重循环进行像素级采样，适合静态图像处理，但实时性较差。对于动态内容，建议采用分块处理策略。

2.2 WebGL性能优化

使用WebGL时，通过调整高斯核半径和采样点数量可平衡质量与性能：

// Fragment Shader示例
precision mediump float;
uniform sampler2D u_image;
uniform vec2 u_textureSize;
uniform float u_blurRadius;
void main() {
  vec2 texCoord = gl_FragCoord.xy / u_textureSize;
  vec4 sum = vec4(0.0);
  float weightSum = 0.0;
  // 高斯权重计算
  for (float i = -4.0; i <= 4.0; i++) {
    float weight = exp(-0.5 * pow(i / u_blurRadius, 2.0));
    vec2 offset = vec2(i, 0.0) / u_textureSize;
    sum += texture2D(u_image, texCoord + offset) * weight;
    weightSum += weight;
  }
  gl_FragColor = sum / weightSum;
}

实际项目中，建议使用现成的WebGL库如StackBlur，其性能比纯Canvas实现提升3-5倍。

三、动态模糊的进阶应用

3.1 滚动模糊效果实现

结合Intersection Observer和CSS Transform：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const element = entry.target;
    const blurIntensity = Math.min(10, Math.abs(entry.boundingClientRect.y) / 50);
    element.style.filter = `blur(${blurIntensity}px)`;
  });
}, { threshold: [0, 1] });
document.querySelectorAll('.scroll-blur').forEach(el => {
  observer.observe(el);
});

此方案通过检测元素在视口中的位置动态调整模糊强度，需注意设置合理的模糊上限防止性能下降。

3.2 视频流实时模糊处理

对于WebRTC视频流，可采用Canvas逐帧处理：

const video = document.querySelector('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
function processFrame() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  ctx.drawImage(video, 0, 0);
  // 应用模糊
  ctx.filter = 'blur(3px)';
  ctx.drawImage(canvas, 0, 0);
  requestAnimationFrame(processFrame);
}
video.addEventListener('play', processFrame);

实际项目中需考虑帧率同步问题，建议使用Worker线程处理图像数据。

四、性能优化策略

1. 分层渲染：将模糊元素置于独立图层，减少重绘范围
2. 降级方案：通过@supports检测filter支持情况，提供Canvas回退方案
3. 内存管理：及时释放不再使用的Canvas上下文，避免内存泄漏
4. 采样优化：对大尺寸图像先进行降采样处理，再应用模糊效果

五、常见问题解决方案

问题1：移动端设备出现卡顿
解决方案：限制最大模糊半径（建议不超过8px），启用GPU加速，减少同时模糊的元素数量。

问题2：模糊边缘出现锯齿
解决方案：扩展模糊区域10%-20%，或通过CSS的overflow: hidden裁剪边缘。

问题3：动态模糊更新不及时
解决方案：使用requestAnimationFrame协调动画，避免在scroll事件中直接操作DOM。

通过合理选择技术方案并实施针对性优化，前端模糊效果可在保持视觉吸引力的同时，确保60fps的流畅体验。实际开发中建议建立性能基准测试，根据设备能力动态调整模糊参数。