WebAssemblyが遅いときに確認すること【ブラウザを複数つかいましょう】

この記事はWebAssemblyを開発中でパフォーマンスを気にされている方向けです。

WebAssemblyはJavascriptに比べて一般的にパフォーマンスが高いといわれています。
しかしながら、せっかく作成したWebAssemblyのプログラムが
思ったよりパフォーマンスが低いことがありました。

いくつか要因はあるのですけども、今回はブラウザにフォーカスしてます。

ブラウザが違うだけで5倍の性能差

WebAssemblyの実行速度はブラウザ側の性能にも影響されます。

FirefoxとChromeで実行速度が5倍以上変わることもありました。

実際に見てみましょう。

サクッと試す

WebAssemblyを利用したプログラムは、こちらのURLで試すことができます。

https://static-service.nryblog.work/web/crypto/

個人的な目的のために作成したWebAssemblyのプログラムになります。
指定した回数をハッシュ化する仕組です。

試しに手元で100万回を指定して実行すると

  • Google Chrome: 9.9 秒
  • Firefox: 1.4 秒

でした。Chromeが思ったより遅かったです。

実行時のバージョンはこちら
Google Chrome 85.0.4183.121
Firefox 81.0.1

開発時には複数のブラウザで試すほうが〇

自分で作成したプログラムが原因で遅いのか、ブラウザの使用で遅いのかを切り分けるために
開発時には複数のブラウザで試すことをお勧めします。

Chrome、Firefox、Safari、Edge .etc多くのブラウザでWebAssemblyのサポートが表明されているので選択肢には困らないでしょう。

https://developer.mozilla.org/ja/docs/WebAssembly#Browser_compatibility

注意点としてはEdgeの中身がChromeと一緒ということですね。

windowsを利用している場合はChromeとEdgeでかぶりがちなのでFirefoxを使うといいかもしれません。

まとめ

今回の検証結果ではFirefoxのほうがパフォーマンスが良かったとなりました。

しかし、プログラムの組み方や得意とする処理が違うだけかもしれません。
あくまで一時的な結果と考えています。

今後のバージョンアップでFirefoxもChromeもより良い性能になってくると思います。楽しみです。

では。