前言

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