Pro Yearly is on sale from $80 to $50! »

JavaScript から WebAssembly へ / JavaScript into WebAssembly

13d936e697fe0f4fa96f926d0a712f6c?s=47 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/

13d936e697fe0f4fa96f926d0a712f6c?s=128

Sansan

January 23, 2019
Tweet

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