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