网页背景虚化需用canvas降采样+均值模糊+web worker：先缩放至1/4～1/8尺寸，再双通道滑动窗口模糊，worker中处理并复用缓冲区，最后放大绘制，兼顾实时性与性能。
Canvas像素模糊实现网页背景虚化，核心是用getImageData读取像素、手动卷积计算加权平均、再用putImageData写回——但直接在主线程做高斯模糊会卡顿，必须结合Web Worker + 降采样 + 算法优化才能做到“实时”。
降采样先行：先缩小再模糊，大幅减少计算量
全尺寸模糊（如1920×1080）需处理超200万像素，每像素至少9次采样，性能不可行。正确做法是：
- 用
canvas.getContext('2d').drawImage()将原始背景图缩放到目标尺寸的1/4甚至1/8（例如从1920×1080 → 480×270） - 只对这个小画布执行模糊，计算量下降至原来的1/16～1/64
- 模糊后再用
drawImage放大回原尺寸，利用浏览器双线性插值平滑边缘
用快速均值模糊替代高斯模糊，兼顾效果与速度
标准高斯模糊需浮点权重和多次遍历，而均值模糊（Box Blur）只需整数滑动窗口求和，可单趟完成：
- 对每个通道（R/G/B/A）分别做水平一维模糊：维护一个长度为
radius×2+1的滑动窗口，逐列累加减像素值 - 再做垂直一维模糊：同理滑动窗口处理行方向
- 两次一维模糊等效于二维均值模糊，性能提升约3倍，视觉差异在背景虚化场景中几乎不可辨
用Web Worker脱离主线程，避免阻塞渲染
模糊计算仍可能耗时10–50ms，放在主线程会导致页面掉帧。应：
- 将降采样后的
Uint8ClampedArray数据通过postMessage传给Worker - Worker内执行纯JS模糊逻辑（不访问DOM或Canvas API），完成后返回新像素数组
- 主线程收到后调用
putImageData更新小画布，再放大绘制到最终背景层 - 配合
requestIdleCallback控制处理频率，例如每秒最多处理3帧，留出余量响应用户操作
动态适配与内存复用，防止频繁GC拖慢
反复创建ImageData对象会触发垃圾回收，应复用缓冲区：
- 提前创建两个
ImageData实例（inputBuf / outputBuf），在Worker中循环交换使用 - 监听
window.resize事件，仅当画布尺寸变化时才重新生成降采样Canvas，避免无谓重绘 - 对静止背景（如CSS设置的固定图片），首次模糊后缓存结果；内容动态变化（如视频帧）则按需触发，但加入节流（如300ms内只处理最新一帧）
不复杂但容易忽略：模糊半径建议控制在3–8像素，过大不仅慢，还会让文字边缘发虚；Alpha通道务必参与计算，否则透明区域会出现异常色边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
