Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript から WebAssembly へ / JavaScript into W...

Sansan
January 23, 2019

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/

Sansan

January 23, 2019
Tweet

More Decks by Sansan

Other Decks in Technology

Transcript

  1. 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
  2. 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 ※実際このような無意味なコードはありえないと思いますが、なんとなく概要をつかむために単純化しています。
  3. JavaScriptは遅い!(パースから実行まで) 2 + 5 JavaScript Add [2] [5] ByteCode インタプリタ実行

    add $0x02 $0x05 x86 JITコンパイル JavaScriptエンジン ※実際このような無意味なコードはありえないと思いますが、なんとなく概要をつかむために単純化しています。 7
  4. 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
  5. 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
  6. 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) ) )
  7. 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]);
  8. 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]); 機械語までとても近い