Slide 1
Slide 1 text
JavaScriptから
WebAssemblyへ
#sansan_engineer
@adsholoko
1
Slide 2
Slide 2 text
自己紹介
荒川聖悟
Twitter: @adsholoko
2018.11 Sansanに入社。
SansanモバイルアプリのAPI開発を主に
しています。
2
Slide 3
Slide 3 text
ブラウザの動き（最もシンプルな形）
Webサーバ
GET /search?q=sansan HTTP/1.1
『Sansan』を検索しよう
HTML CSS JavaScript
3
Slide 4
Slide 4 text
ブラウザの動き（最もシンプルな形）
Webサーバ
GET /search?q=sansan HTTP/1.1
『Sansan』を検索しよう
HTML CSS JavaScript
どのようにJavaScript
は実行されるのか？
4
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
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
※実際このような無意味なコードはありえないと思いますが、なんとなく概要をつかむために単純化しています。
Slide 7
Slide 7 text
JavaScriptは遅い！（パースから実行まで）
2 + 5
JavaScript
Add [2] [5]
ByteCode
インタプリタ実行
add $0x02 $0x05
x86
JITコンパイル
JavaScriptエンジン
※実際このような無意味なコードはありえないと思いますが、なんとなく概要をつかむために単純化しています。
7
Slide 8
Slide 8 text
ブラウザ総実行時間が
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
Slide 9
Slide 9 text
WebAssemblyを使う
Webサーバ
GET /search?q=sansan HTTP/1.1
HTML CSS JavaScript wasm
9
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
WebAssemblyだったら...
デコード
add $0x02 $0x05
x86
コンパイル
JavaScriptエンジン
12
Slide 13
Slide 13 text
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)
)
)
Slide 14
Slide 14 text
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]);
Slide 15
Slide 15 text
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]);
機械語までとても近い
Slide 16
Slide 16 text
WebAssemblyの良いところ、悪いところ
メリット
・実行速度が速い
・ファイルサイズが小さい
・JavaScriptと互換性を持つ
・メモリも食わない（+GC不要）
デメリット
・JavaScriptのすべての機能を網羅でき
ていない（DOM操作とか）
・実行環境の問題（モダンなブラウザしか
対応してません）
・新しめの技術なので情報量が少ないこ
と
16
Slide 17
Slide 17 text
WebAssemblyを触ってみた記事（and C# ）
17