SIMD助力Photoshop迁移Web？浏览器为何沉迷SIMD？

2023-02-09 今日头条前端进阶

前言

WebAssembly SIMD以独立于平台的方式向 WebAssembly 应用程序公开硬件 SIMD 指令。 SIMD 提案引入了一种新的 128 位值类型，可用于表示不同类型的打包数据，以及几种对打包数据进行操作的向量运算。

SIMD 可以通过利用数据级并行性来提高性能，在将本机代码编译为 WebAssembly 时也很有用。

Chrome 91 默认开启了WebAssembly SIMD。

1.什么是SIMD？

SIMD （Single Instruction Multiple Data）代表单指令，多数据。 SIMD 指令是一类特殊的指令，它通过同时对多个数据元素执行相同的操作来充分利用数据并行性。音、视频编解码器、图像处理器等计算密集型程序都是利用 SIMD 指令加速性能的典型场景。大多数现代架构都支持 SIMD 指令的某些变体。

SIMD

WebAssembly SIMD 提议定义了一个可移植的、高性能的 SIMD 操作子集，可用于大多数现代架构。该提案从 SIMD.js 提案中衍生出许多元素，而 SIMD.js 提案最初又是从 Dart SIMD 规范中衍生出来的。 SIMD.js 提案是在 TC39 上提出的一个 API，它具有用于执行 SIMD 计算的新类型和函数，但是为了在 WebAssembly 中更透明地支持 SIMD 操作，它被归档了。

WebAssembly SIMD 提议被引入作为浏览器使用底层硬件来处理数据并行性的方式。

2.为什么需要SIMD？

比如下面的例子，当需要对两个长度为4的数组做加法时，使用普通的指令，则需要执行4次普通加法指令。如果使用SIMD指令的话，则只需要执行1次向量加法即可。

为什么需要SIMD？图片引用于：https://developer.aliyun.com/article/860557

SIMD 常用于视频、音频、图像、加密、动画、游戏、AI等需要处理大量数据的应用场景，可以极大地提高向量类型的数据处理性能。主流的CPU都有SIMD指令，比如x86的SSE、ARM的Neon。

3.WebAssembly SIMD 提案核心内容？

WebAssembly SIMD 提案的最终目标是以保证可移植性能的方式将向量操作引入 WebAssembly 规范。

SIMD 指令集很大，并且在不同的体系结构中各不相同。 WebAssembly SIMD 提议中的操作集包括在各种平台上得到很好支持的操作，并且被证明是高性能的。不过，目前的提案仅限于标准化 Fixed-Width 128 位 SIMD 操作。

当前的提议引入了一个新的 v128 值类型，以及一些对该类型进行操作的新操作。用于确定这些操作的标准是：

这些操作在多个现代架构中得到很好的支持
在指令组内的多个相关架构中，应该有较好的性能
所选的操作应该最小化性能降低（performance cliffs）

该提案现在处于最终确定状态（第 4 阶段），V8 和工具链都有可用的实现。目前，Emscripten仅支持将WebAssembly SIMD指令编译为x86 SSE/AVX指令以及ARM Neon指令。

WebAssembly SIMD指令编译。图片引用于：https://developer.aliyun.com/article/860557

4.启用 SIMD 支持

4.1 特征检测

首先，请注意 SIMD 是一项新功能，并非在所有支持 WebAssembly 的浏览器中都可用。具体浏览器支持情况可查看4.2小节的图。

为确保所有用户都可以加载您的应用程序，需要构建两个不同的版本，一个启用 SIMD，一个不启用，并根据功能检测结果加载相应的版本。要在运行时检测 SIMD，您可以使用 wasm-feature-detect 库并加载相应的模块，如下所示：

brimport { simd } from 'wasm-feature-detect';br(async () => {br  const hasSIMD = await simd();br  // 等待返回br  const module = await (br    hasSIMDbr      ? import('./module-with-simd.js')br      : import('./module-without-simd.js')br  );br  //可以像平时一样使用 `module`br})();

如果是UMD格式可以通过:

br<script src="https://unpkg.com/wasm-feature-detect/dist/umd/index.js"></script>br<script>br  wasmFeatureDetect.simd().then(/* same as above */);br</script>

wasm-feature-detect本质上是一个小型库，用于检测支持哪些 WebAssembly 功能。

✅ 所有浏览器都支持
✅ Node环境中依然可用
✅ 提供ES6 模块、CommonJS 和 UMD版本
✅ CSP兼容
✅ gzip压缩后~640B

4.2 浏览器中的 SIMD 支持

下图展示了Fixed-Width 128 位 SIMD的浏览器支持情况。

Fixed-Width 128 位 SIMD浏览器支持情况

如图所示，WebAssembly SIMD 支持默认从 Chrome 91 开始。确保使用最新版本的工具链，以及最新的 wasm-feature-detect 来检测支持最终版本规范的引擎。Firefox 89 及更高版本也支持 WebAssembly SIMD。

5.总结

本文只是告诉大家什么是SIMD，为什么WebAssembly需要引入SIMD？因为笔者不是这方面的专家，关于SIMD也就浅尝辄止。但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。其中值得一提的WebAssembly SIMD的典型示例：

google Meet借助WebAssembly实现了视频的实时背景虚化以及背景替代，利用WebAssembly SIMD使其性能提升了至少2倍。
2021年，Photoshop迁移到了Web也是通过WebAssembly实现的，其中，WebAssembly SIMD发挥了重要的作用，将性能平均提升了3~4倍，有些场景下甚至达到惊人的80~120倍。

参考资料

https://chromestatus.com/feature/6533147810332672

https://v8.dev/features/simd

https://developer.aliyun.com/article/860557

https://Github.com/GoogleChromeLabs/wasm-feature-detect

https://github.com/WebAssembly/simd/blob/main/proposals/simd/SIMD.md