高性能客户端图像处理
在浏览器中处理图像现在已成为一项标准需求。你可能会构建照片编辑器、资源工具包或无障碍过滤器。为了保持 UI 的响应能力，你需要低延迟。
一个简单的任务是颜色反转。这意味着将 RGB 值翻转为它们的负值。如果你在 4K 图像上使用标准方法，会遇到硬件瓶颈。
问题：朴素迭代
大多数开发者使用 getImageData() 方法。它返回一个 Uint8ClampedArray。该数组将像素存储为红 (Red)、绿 (Green)、蓝 (Blue) 和 Alpha (RGBA) 通道。
标准循环如下所示：
- 遍历每一个字节。
- 从 255 中减去每个颜色值。
- 跳过 Alpha 通道。
这对于小图像有效，但对于 4K 资源则会失效。一张 4K 图像拥有超过 800 万个像素。一个标准循环会执行超过 3300 万次单独的写入操作。这会阻塞主线程，导致浏览器卡顿和掉帧。
解决方案：32 位缓冲区操作
你可以不再将像素视为四个独立的通道。相反，在数据缓冲区之上叠加一个 Uint32Array。
通过使用 32 位视图，你将 R、G、B 和 A 分组为一个单一的整数。你的循环现在只需进行 820 万次迭代，而不是 3300 万次。你对每个像素执行一次操作，而不是四次。
通过按位 XOR 实现快速颜色反转
为了在不触及 Alpha 通道的情况下反转颜色，请使用按位 XOR 运算符 (^)。使用掩码 0x00FFFFFF。
工作原理：
- 掩码仅针对颜色位。
- Alpha 位保持不变。
- CPU 在单个周期内处理此操作。
结果：
- 1080p 资源：快 3.8 倍。
- 2K 模板：快 4.1 倍。
- 4K 壁纸：快 4.4 倍。
专业提示：使用 Web Workers 如果你处理大量高分辨率文件，即使是 32 位操作也可能减慢 UI。将逻辑移至 Web Worker。使用 Transferable Objects 来传递缓冲区。这可以避免复制数据并保持主线程空闲。
停止使用沉重的循环。使用 32 位字和按位标志来构建精简、快速的图像流水线。