JavaScript から WebAssembly へ / JavaScript into WebAssembly

■イベント
「Sansan Advent Calendar - 2018年を振り返る -」
https://sansan.connpass.com/event/112635/

■登壇概要
タイトル：
JavaScript から WebAssembly へ

登壇者：
Sansan株式会社 Sansan事業部 プロダクト開発部
サーバサイドエンジニア
荒川聖悟

▼Sansan Builders Box
https://buildersbox.corp-sansan.com/

Transcript

1. JavaScriptから WebAssemblyへ #sansan_engineer @adsholoko 1
2. 自己紹介 荒川聖悟 Twitter: @adsholoko 2018.11 Sansanに入社。 SansanモバイルアプリのAPI開発を主に しています。 2
3. ブラウザの動き（最もシンプルな形） Webサーバ GET /search?q=sansan HTTP/1.1 『Sansan』を検索しよう HTML CSS JavaScript 3
4. ブラウザの動き（最もシンプルな形） Webサーバ GET /search?q=sansan HTTP/1.1 『Sansan』を検索しよう HTML CSS JavaScript どのようにJavaScript は実行されるのか？ 4
5. JavaScriptは遅い！（パースから実行まで） { "type": "Program", "expression": { "type": "BinaryExpression", "left": { "type": "Literal", "value": 2 }, "operator": "+", "right": { "type": "Literal", "value": 5, "raw": "5" }}} 2 + 5 JavaScript AST変換 2 + 5; JavaScript 5
6. JavaScriptは遅い！（パースから実行まで） Add [2] [5] 2 + 5 JavaScript { "type": "Program", "expression": { "type": "BinaryExpression", "left": { "type": "Literal", "value": 2 }, "operator": "+", "right": { "type": "Literal", "value": 5, "raw": "5" }}} バイトコード ByteCode 6 ※実際このような無意味なコードはありえないと思いますが、なんとなく概要をつかむために単純化しています。
7. JavaScriptは遅い！（パースから実行まで） 2 + 5 JavaScript Add [2] [5] ByteCode インタプリタ実行 add $0x02 $0x05 x86 JITコンパイル JavaScriptエンジン ※実際このような無意味なコードはありえないと思いますが、なんとなく概要をつかむために単純化しています。 7
8. ブラウザ総実行時間が 15-20%がパース ※https://blog.sessionstack.com/how-javascript-works-parsing-abstract-syntax-trees-asts-5-tips-on-how-to-minimize-parse-ti me-abfcf7e8a0c8 8
9. WebAssemblyを使う Webサーバ GET /search?q=sansan HTTP/1.1 HTML CSS JavaScript wasm 9
10. WebAssemblyなら不必要！ { "type": "Program", "expression": { "type": "BinaryExpression", "left": { "type": "Literal", "value": 2 }, "operator": "+", "right": { "type": "Literal", "value": 5, "raw": "5" }}} 2 + 5 JavaScript AST変換 2 + 5 JavaScript 10
11. WebAssemblyなら不必要！ Add [2] [5] 2 + 5 JavaScript { "type": "Program", "expression": { "type": "BinaryExpression", "left": { "type": "Literal", "value": 2 }, "operator": "+", "right": { "type": "Literal", "value": 5, "raw": "5" }}} バイトコード ByteCode 11
12. WebAssemblyだったら... デコード add $0x02 $0x05 x86 コンパイル JavaScriptエンジン 12
13. WebAssemblyだったら... デコード add $0x02 $0x05 x86 コンパイル JavaScriptエンジン 13 (module (table 0 anyfunc) (memory $0 1) (export "memory" (memory $0)) (export "main" (func $main)) (func $main (; 0 ;) (result i32) (i32.const 7) ) )
14. WebAssemblyだったら... デコード add $0x02 $0x05 x86 コンパイル JavaScriptエンジン 14 var wasmCode = new Uint8Array([0,97,115,109,1,0,0, 0,1,133,128,128,128,0,1,96,0,1, 127,3,130,128,128,128,0,1,0,4,1 32,128,128,128,0,1,112,0,0,5,13 1,128,128,128,0,1,0,1,6,129,128 ,128,128,0,0,7,145,128,128,128, 0,2,6,109,101,109,111,114,121,2 ,0,4,109,97,105,110,0,0,10,138, 128,128,128,0,1,132,128,128,128 ,0,0,65,7,11]);
15. WebAssemblyだったら... デコード add $0x02 $0x05 x86 コンパイル JavaScriptエンジン 15 var wasmCode = new Uint8Array([0,97,115,109,1,0,0, 0,1,133,128,128,128,0,1,96,0,1, 127,3,130,128,128,128,0,1,0,4,1 32,128,128,128,0,1,112,0,0,5,13 1,128,128,128,0,1,0,1,6,129,128 ,128,128,0,0,7,145,128,128,128, 0,2,6,109,101,109,111,114,121,2 ,0,4,109,97,105,110,0,0,10,138, 128,128,128,0,1,132,128,128,128 ,0,0,65,7,11]); 機械語までとても近い
16. WebAssemblyの良いところ、悪いところ メリット ・実行速度が速い ・ファイルサイズが小さい ・JavaScriptと互換性を持つ ・メモリも食わない（+GC不要） デメリット ・JavaScriptのすべての機能を網羅でき ていない（DOM操作とか） ・実行環境の問題（モダンなブラウザしか 対応してません） ・新しめの技術なので情報量が少ないこ と 16
17. WebAssemblyを触ってみた記事（and C# ） 17