WebAssembly
https://upload.wikimedia.org/wikipedia/commons/3/30/WebAssembly_Logo.png
「wasm」は「わずむ」と濁るっぽいmrsekut.icon
軽くまとめたもの
WebAssemblyざっくり概要
ざっくりAssemblyScript
WebAssemblyをサポートする言語
Bytecode Alliance
#WIP
https://zenn.dev/koduki/articles/9f86d03cd703c4
https://zenn.dev/hodagi/articles/4925afbeb3c4dc
WebAssemblyのGC
https://www.publickey1.jp/blog/23/webassemblychrome_111dartwebassembly.html
↓古い
概要
バイナリフォーマット
ブラウザ上で動作する低水準言語
低水準のある種のアセンブリ言語だが、人間でも読めるフォーマット
Linear Assembly Bytecode ref
主要ブラウザベンダーが協働で使用策定
Google, MicroSoft, Mozilla, Apple, LLVM, Unity
WebAssemblyをサポートした言語で書かれたコードをコンパイルしてWebブラウザ上で実行できる
JavaScriptより速い
ロードタイムを速くする
実行時間を速くするわけではない
のか?
IEを除く大体のブラウザで動く
Can I use... Support tables for HTML5, CSS3, etc
論文
Bringing the Web up to Speed with WebAssembly
2017
Google, Mircrosoft, Apple, Mozillaの人の共著
関連
Documet
github
WebAssembly のコンセプト - WebAssembly | MDN
WASI
WebAssembly News
特徴
安全
ポータブル
高速
WebAssemblyの誕生の経緯
なぜ速いのか
軽量
バイナリ形式で配布する
textじゃなくてバイナリ形式な分、フェッチするデータ量が少なくて済む
起動が高速
事前にコンパイル
事前に型が決まるので高速
すべての命令が型を持つ
JSは動的型付けなので遅い
この過程で最適化ができる
実行時に、パース、コンパイルなどの処理をしない
動作が高速
ネイティブコード並の速さがでる
CPU機能の利用ができる
なぜWebAssemblyはasm.jsより速いのか - Qiita
実際どのくらい速いのか
https://medium.com/samsung-internet-dev/performance-testing-web-assembly-vs-javascript-e07506fd5875
https://twitter.com/chikoski/status/1033183219326177280
https://twitter.com/linda_pp/status/1075278355887357952
https://twitter.com/dynamitter/status/1100597051409149952
https://twitter.com/azu_re/status/1096224371255828480
JSConfJP2019 day1#5de48b0c1982700000c915d2
wasmはjsとできることは同じだが、速いのがうれしい
jsよりはやい
emscriptenの出力ファイルを実行するよりも速い
いまはおそい
Cの半分ぐらい
ネイティブコードはOSとかと絡むので、気をつけないといけないので
安全性が担保されている
だからこそ遅かったりする
UBは未定義ビヘイビア
これが起きないように気をつけてるから遅い
たとえばCでは配列の範囲外へのアクセス
module
配布する単位
オブジェクトファイルみたいな
関数のリスト、グローバル(変数?),テーブル、メモリなどの定義
import, exportが可能
classみたいなもの
ここからinstanceを作成する
moduleを実体化したもの
型システム
https://html5experts.jp/chikoski/22523/
WASMモジュールの構造
のとこ
型にはそれぞれidが振られている
このidを用いて関数を型付けする
型は4種類
以下の組み合わせ
int, float
32bit, 64bit
オブジェクト、文字列は無理
論文のセクション4に書いてる
#あとで調べる
WebAssemblyバイナリ作成
wat
.wat
アセンブリをS式で表現したもの
頑張れば手書きできる
ここを読めば読めるようになる
線形のテキスト表現
wasm ref
.wasm
バイナリ
$ sexpr-wasm -o hoge.wasm hoge.wast
コード例 ref
アセンブリ言語よりも可読性がある
Lispのような括弧でノードを表すS式
スタックマシンの命令列が並んでる
code:wast
(func $func (param i32 i32) (result i32) (local.get 0))
(type $check (func (param i32 i32) (result i32)))
(table funcref (elem $func))
(func (export "as-call_indirect-first") (result i32)
(block (result i32)
(call_indirect (type $check)
(loop (result i32) (i32.const 1)) (i32.const 2) (i32.const 0)
)
)
)
用途
JS以外の言語のプログラムをブラウザで実行したい
フロント、バックエンドを同じ言語で書ける
再利用とか、うれしい
現在はDOM操作ができない
Canvas, WebGL
重たい計算処理
暗号、圧縮、画像処理など
ゲームプラットフォームのブラウザ上への構築
モバイル、ゲーム機と並んでブラウザ向けにゲームをリリースできる
Cの既存の資産を生かす
圧縮、暗号、画像処理
CPUに依存する処理の高速化
LuaはC実装なのでwasmでコンパイルできた(?)
Use Cases
未読
JSとの共存
以下はできる
JSからWebAssemblyのロード、実行
WebAssemblyからJS関数の呼び出し
採用事例
eBayがwebのバーコードスキャナにwasmを採用した
WebAssembly at eBay: A Real-World Use Case
wasmを含んだ幾つかの実装を並行に開発してwasm製のものが最速だったらしい
スキャンするのが速い、
製品全体をwasmで作った(?)
現状できないこと ref
GC
Threads
SharedArrayBufferはすでに使える
複数のスレッドに対する処理、waitやwakeなどがまだ
徐々に行けるようになってる
DOM操作もまだ?
etc.
WebAssembly実装
Wasmer
wasm-module
https://github.com/richardanaya/wasm-module
Rustで書いたWebAssemblyでもDOM操作をできるようにするやつ
wabt
https://github.com/WebAssembly/wabt/tree/master/wasm2c
逆にWebAssemblyからCを出力できる
頑張ればTypeScript→WebAssembly→Cと変換できるのかな?
実行する ref
JSファイルから読み込む
wasmファイルがブラウザ上でコンパイルして機械語に翻訳される
サイズが大きくなるとコンパイル時間も大きくなるが、従来のJSに比べれば高速
V8 v7.5からは、このコンパイル済みのモジュールがキャッシュされる
WebAssembly.compile
WebAssembly.instantiate(module)
moduleをインスタンス化したものを返す
V8のv7.5の話 ref
https://v8.dev/blog/v8-release-75
WebAssemblyのコンパイル済みモジュールをキャッシュする
つまり、同じページに再び訪問したときは再コンパイルせず、キャッシュ済みのモジュールをロードする
誰かの実装してみた記事
https://qiita.com/kgtkr/items/f61612a82b8bebe779aa
関連ツール
The WASM Explorer
以下を比較できる
C, C++のコード
wast
Firefox x86 アセンブリ言語
LLVM x86 アセンブリ言語
FireFox右上の三角をクリック
WasmFIddle
Cからwasmを作って実際にブラウザで実行するところまでできる
ast.run
wasmのplayground
JavaScript vs WebAssembly easy benchmark
JSとwasmを実行して比較する
サイドバーから選んで「run」する
フィボナッチとか良い感じに2倍くらい差が出る
WebAssembly Studio
C, Rust, AssemblyScript対応のオンラインIDE
Mozilla製
「Build」した後に「Run」
ブラウザから機械語を実行できるWebAssembly用のオンライン開発環境「WebAssembly Studio」を使ってみた - GIGAZINE
Blockly  |  Google Developers
Blockly向けのAssemblyScriptコードジェネレータ
つまりコンパイルしてwasmを吐けるビジュアルプログラミング言語
実際にWasmが使われているWebService
SketchUp ref
Google Earth
wasmの分析
https://github.com/danleh/wasabi
WebAssemblyコンパイラを自作する ref
https://blog.scottlogic.com/2019/05/17/webassembly-compiler.html
https://speakerdeck.com/ryohey/typescript-te-webassembly-chu-li-xi-woshu-itahua?slide=29
Wasm/k
ファイルサイズ
https://tech.aptpod.co.jp/entry/2019/12/03/102305
rust vs go
rustだいぶちいさい
react, redux
https://www.fullstackreact.com/articles/rust-react-and-web-assembly/
他にも記事あるかも
RustでWebAssemblyを扱う
https://qiita.com/chikoski/items/de74bd4e439c987c8f42
https://qiita.com/chikoski/items/942586b71331c0c59274
https://blog.bokuweb.me/entry/2018/12/21/222522
https://qiita.com/mizchi/items/30e32dccf36a0610daef
https://yoshitsugu.net/posts/2018-06-15-rust-yew.html
http://nmi.jp/2018-03-19-WebAssembly-with-Rust
http://suzumi.hatenablog.com/entry/2017/01/05/180405
https://qiita.com/chikoski/items/6c9f24dc4a825c437e78
https://wasm-dev-book.netlify.com/hello-wasm.html
https://qiita.com/snst-lab/items/5a4604f20c44db96fdeb
GoでWebAssemblyを扱う
https://www.kabuku.co.jp/developers/go-to-webassembly
CでWebAssemblyを扱う
https://qiita.com/umamichi/items/c62d18b7ed81fdba63c2
https://rhysd.hatenablog.com/entry/2018/07/09/090115
Advent Calendar
https://qiita.com/advent-calendar/2017/webassembly
https://qiita.com/advent-calendar/2018/wasm
https://speakerdeck.com/chikoski/20170924-html5conference-wasm?slide=2
2019/7/26あたりに追加された未読記事
https://emsn.connpass.com/event/136346/presentation/?utm_campaign=new_event_links_to_group_member&utm_source=notifications&utm_medium=email&utm_content=detail_btn
https://togetter.com/li/1379978
https://docs.google.com/presentation/d/1W6ITEZBTD42MF1uCB8gghG7HfJoRv_JGsX5RqSpLRfo/edit#slide=id.p
https://speakerdeck.com/bokuweb/emscripten-night-7
https://speakerdeck.com/omochi/zui-jin-falseswiftfalsewasmdui-ying
https://www.kabuku.co.jp/developers/wasm-proposal
https://speakerdeck.com/leonardo_mbc/web-assembly-to-hua-xiang-dong-hua
https://note.com/chikoski/n/n6f8b283767fc
WebAssemblyを呼び出すJavaScript側のAPI
WebAssembly - JavaScript | MDN
fetch()などを使って動的にロードする
関連書籍
WebAssembly in Action
Programming WebAssembly With Rust
資料
https://wasm-dev-book.netlify.com/
↑百萬石の記事を書き直したもの
Misreading Chat
#作成ネタ
https://another.maple4ever.net/archives/2770/
https://qiita.com/kgtkr/items/f4b3e2d83c7067f3cfcb
https://youtu.be/Ga8P_buwXnw?t=3918
wasmはめちゃくちゃ速くなるわけではないが、JSと比較して処理速度のブレが小さくなる
ブラウザをまたいでも
実際に使われているケースでは、パフォーマンス目的と言うよりは、既存のC実装のライブラリをブラウザで使用したい、といったものが多い
TensorFlow LiteとかFigmaも?
参考
https://eh-career.com/engineerhub/entry/2022/07/04/093000
実際はJSよりそんな爆速になるわけではない、など
Bringing the Web up to Speed with WebAssembly
Misreading Chat 22
WebAssembly が書ける言語まとめ | hifive開発者ブログ
WebAssembly - Wikipedia
WebAssemblyはなぜ速いのか | POSTD
jsのfetch,parse,最適化など順番にwasmと比較していてわかりやすい
2016/05/11時点でWebAssembly関連の情報を整理してみた - Qiita
WebAssemblyの基礎から最新動向まで、@chikoskiに聞いてきた! | HTML5Experts.jp
S.F. Blog:WebAssemblyとAssemblyScriptの導入を考える
WebAssembly の基礎
1年間本番環境で WebAssembly ( by Emscripten )を使ってきた中で生じた問題とその解決策 - Qiita
【WebAssembly初心者必読】バイナリコードを使って「 WebAssembly 」の基礎を徹底解説してみた! | 株式会社ヌーラボ(Nulab inc.)
S.F. Blog:WebAssemblyとAssemblyScriptの導入を考える
Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーasm.jsを高速に動作させる新しいコンパイラーターゲットWASMとは? | HTML5Experts.jp
詳説WebAssembly
https://qiita.com/advent-calendar/2019/wasm
あどかれ
https://dev.to/nabbisen/webassembly--3385
http://atsushieno.hatenablog.com/entry/2020/01/01/121050
https://www.slideshare.net/llamerada-jp/webassembly-75175349
https://speakerdeck.com/d0iasm/webassembly-outside-of-the-browser
https://webassembly.sh/?run-command=python
https://nulab.com/ja/blog/nulab/basic-webassembly-begginer/