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

前言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 () => {brconst hasSIMD = await simd();br// 等待返回brconst module = await (brhasSIMDbr? import('./module-with-simd.js')br: import('./module-without-simd.js')br);br//可以像平时一样使用 `module`br})();

如果是UMD格式可以通过:
br<script src=https://www.isolves.com/it/cxkf/qd/2023-02-10/"https://unpkg.com/wasm-feature-detect/dist/umd/index.js">brwasm-feature-detect本质上是一个小型库，用于检测支持哪些 WebAssembly 功能。