20161221-WASM

Transcript

1. ブラウザプレビュー期間に入ったWebAssembly Mozilla Japan N.Shimizu (nshimizu@mozilla-japan.org / @chikoski) Emscripten Night!! #2 @ Drecom (2016/12/21)
2. /
   4IJNJ[V
   
   
   !DIJLPTLJ ˖ ⛆加㖩ח֮׷8FC׾⡲׷⠓爡ד⫴ְגְתׅ
   ˖ 'JSFGPY
   ˖ 3VTU
   
   BTNKT
   
   8FC"TTFNCMZ
   
   8FC73
   
   ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅׷ךָ㥨ֹדׅ
   ˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ
   ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ
5. Open Source Project
6. Proudly non-profit, Mozilla makes products like Firefox with a mission to keep the power of the Web in the hands of users everywhere. Mozilla Mission (https://www.mozilla.org/en-US/mission/)
7. To ensure the Internet is a global public resource, open and accessible to all. Mozilla Mission(https://www.mozilla.org/en-US/mission/)
8. debugger.html：再開発中のFirefox 組み込みのデバッガー • React と Redux、flow を使って実装されています • スタンドアローンで実行できます • Firefox だけでなく、Google Chromeやnode.jsで動いているコードもデバッグできます • https://github.com/devtools-html/debugger.html
9. Remote Debugging Protocol / Chrome Debugging Protocol のフロントエンド $ISPNF
   %FCVHHJOH
   1SPUPDPM $ISPNF
   %FCVHHJOH
   1SPUPDPM 3FNPUF
   %FCVHHJOH
   1SPUPDPM
10. よく紹介させていただいています！ありがとうございます！！
11. • asm.js のコードはサイズが大きくなりがちで、ロードに時間がかかる傾向があります • ロードに時間の大半が構文解析に充てられています • 構文解析を事前に行い、その結果をバイナリ形式で表現することで、ロード時間を短縮します ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ asm.js ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ WASM
12. WAST TFU@MPDBM
    B
    
    
    JBEE
    
    
    
    
    JDPOTU
    
    
    
    
    
    JNVM
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    JDPOTU
     i32.mul i32.add set_local $a 1 i32.const 1 i32.const 2 i32.const
13. https://hacks.mozilla.org/2016/10/webassembly-browser-preview/
14. https://hacks.mozilla.org/2016/10/webassembly-browser-preview/
15. https://blogs.windows.com/msedgedev/2016/10/31/webassembly-browser-preview/
16. 8"4.׏גוֲװ׏ג8FCل٦آח穈׫鴥׬ך
17. HTML TDSJQU
    UZQFNPEVMF
    TSDNPEVMF@BXBTNTDSJQU
    TDSJQU
    UZQFNPEVMF
    TSDNPEVMF@CKTTDSJQU
    TDSJQU
    TSDNBJOKTTDSJQU 未来的には、ES6 moduleの枠組みで利用できるようにしたい（希望）
18. JS GFUDI NPEVMF@BXBTN
    
    
    UIFO SFTQPOTF
    
    SFTQPOTFBSSBZ#VGGFS
    
    
    UIFO CVGGFS
    
    OFX
    6*OU"SSBZ CVGGFS
    
    
    UIFO CZUFT
    
    8FC"TTFNCMZDPNQJMF CZUFT
    
    
    UIFO NPEVMF
    
    \
    
    
    
    
    
    
    DPOTU
    JOTUBODF
    
    OFX
    8FC"TTFNCMZ*OTUBODF NPEVMF 
    
    
    
    ^  WASMモジュールのコンパイルと、モジュールのインスタンス化
19. 属性 役割 WebAssembly.Module WebAssembly.Moduleオブジェクトのコンストラクタ WebAssembly.Instance WebAssembly.Instanceオブジェクトのコンストラクタ WebAssembly.Memory WebAssembly.Memoryオブジェクトのコンストラクタ WebAssembly.Table WebAssembly.Tableオブジェクトのコンストラクタ WebAssembly.CompileError デコード、もしくは検証中に発生したエラー WebAssembly.RuntimeError trap 発生時に送出されるエラー WebAssembly：グローバルオブジェクト
20. WASMのWebAssembly.Moduleへのコンパイル 1.エンコード方式に従って、バイトコードをデコードし、抽象構文木（AST）を作成します 2.ASTの構造を検証します 3.AST中の文字列を UTF-8 としてデコードします •名前は文字列として扱われます •名前：インポートする関数、エキスポートする関数など 4.上記に成功した場合、WebAssembly.Moduleオブジェクトが作成されます 5.失敗した場合は、WebAssembly.ComileError が送出されます
21. NPEVMF
    
    \
    
    
    MPDBM'PSBHFTFU*UFN DPNQJMFE@NPEVMF@B
    NPEVMF 
    
    
    XPSLFSQPTU.FTTBHF \DPNQJMFE.PEVMF
    NPEVMF 
    ^
    NPEVMF
    
    \
    
    
    MPDBM'PSBHFTFU*UFN DPNQJMFE@NPEVMF@B
    NPEVMF 
    
    
    XPSLFSQPTU.FTTBHF \DPNQJMFE.PEVMF
    NPEVMF 
    ^ PONFTTBHF
    
    GVODUJPO NFTTBHF \
    
    
    DPOTU
    NPEVMF
    
    NFTTBHFDPNQJMFE.PEVMF
    
    
    DPOTU
    JOTUBODF
    
    8FC"TTFNCMZ*OTUBODF JOTUBODF 
    
    
    MFU
    UXP
    
    JOTUBODFFYQPSUTBEE 
     
    ^ main Worker WebAssembly.Module オブジェクトはクローンできます MPDBM'PSBHFחאְגכֿ׍׵׾⿫撑IUUQTHJUIVCDPNMPDBM'PSBHFMPDBM'PSBHF
22. WAST NPEVMF
    
    
    
    
    JNQPSU
    J
    N
    IFMMP
    
    
    
    
    JNQPSU
    J
    XPSME
    
    
    
    
    
    GVOD
    NBJO
    DBMM@JNQPSU
    J
    
    
    
    
    TUBSU
    NBJO
    
    
    
    
    GVOD
    G
    DBMM@JNQPSU
    J
    
    
    
    
    FYQPSU
    G
    G
    import / export
23. JS NPEVMF
    
    \
    
    
    DPOTU
    JNQPSU
    
    \
    
    
    
    
    N
    \IFMMP
    
    
    DPOTPMFMPH IFMMP
    
    
    
    
    XPSME
    
    
    DPOTPMFMPH XPSME
    
    
    ^
    
    
    DPOTU
    JOTUBODF
    
    8FC"TTFNCMZJOTUBODF NPEVMF
    JNQPSU 
    
    IFMMP
    
    
    JOTUBODFFYQPSUTG 
    
    XPSME
    ^
    インスタンス作成時にimportするシンボルを与えることで、ダイナミックリンクさせられます
24. 線形メモリー：WebAssemblyのメモリモデル • バイト単位（8ビット）でアクセスできる線形メモリ • ヒープ領域 • データ領域 • リトルエンディアン • 最大サイズは 4GiB(1ページ64KiB、32ビット分） • 演算子を利用してサイズを増やせます • grow_memory 演算子でサイズを増やせます • current_memory 演算子で現在のサイズを取得できます 
    CZUF  BEESFTT@TQBDF@NBY
25. ԋࢉࢠ ৼΔ෣͍ i32.load8_s 1όΠτΛϩʔυ͠ɺi32΁ͱ֦ு͢Δ i32.load8_u 1όΠτΛϩʔυ͠ɺu32΁ͱ֦ு͢Δ i32.load16_s 2όΠτΛϩʔυ͠ɺi32΁ͱ֦ு͢Δ i32.load16_u 2όΠτΛϩʔυ͠ɺu32΁ͱ֦ு͢Δ i32.load 4όΠτϩʔυ͢Δ i32.store8 i32ͷ஋Λi8ͱͯ͠อଘ͢Δ i32.store16 i32ͷ஋Λi16ͱͯ͠อଘ͢Δ i32.store i32ͷ஋Λอଘ͢Δ 読み書きするデータのサイズは演算子の種類によって決まります
26. JS asm.js WPJE
    IJ DIBS
    CVG \
    
    
    CVG<>
    
    I
    
    
    CVG<>
    
    J
    
    
    CVG<>
    
    =
    ^
    
    GVOD
    IJ
    QBSBN
    
    J
    
    
    
    
    JTUPSF
    PGGTFU
    
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    
    
    
    JTUPSF
    BMJHO
    
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    
    
    I J = CVG
27. 
    
    GVOD
    IJ
    QBSBN
    
    J
    
    
    
    
    JTUPSF
    PGGTFU
    
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    
    
    
    JTUPSF
    BMJHO
    
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    
    
    = HFU@MPDBM
     PGGTFU offsetで、アクセスする場所をバイト単位でずらせます
28. 
    
    GVOD
    IJ
    QBSBN
    
    J
    
    
    
    
    JTUPSF
    PGGTFU
    
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    
    
    
    JTUPSF
    BMJHO
    
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    
    
    I J = HFU@MPDBM
     Y Y Y
    J
    Y
    I align を指定することで、転送サイズを変えられます（上記の例は1バイトずつ転送しています）
29. JS DPOTU
    NPEVMFT
    
    \^
    NPEVMF"
    
    \
    
    
    NPEVMFT"
    
    8FC"TTFNCMZ*OTUBODF NPEVMF" 
    ^
    NPEVMF#
    
    \
    
    
    NPEVMFT#
    
    8FC"TTFNCMZ*OTUBODF NPEVMF# 
    ^
    module.A と module.B はメモリ空間を共有します
30. JS DPOTU
    NFNPSZ
    
    8FC"TTFNCMZ.FNPSZ
    DPOTU
    WJFX
    
    OFX
    6*OU"SSBZ NFNPSZCVGGFS 
    WJFX<>
    
    
    WJFX<>
    
    
    WJFX<>
    
    
    WJFX<>
    
    
    WJFX<>
    
    
    WJFX<>
    
     メモリ空間は、WebAssembly.Memoryオブジェクトとして参照できます
31. つかってください！ • これからはWebAssemblyオブジェクトを利用して、モジュールをコンパイルします • WebAssembly.compile • WebAssembly.Module • WebAssembly.Instance • ダイナミックリンクできるようになりました • メモリ空間はインスタンス間で共有されます • Firefox 52で標準利用できるようになります（2017年3月リリース予定） • バグやおかしいな？と思う点があったら、ご連絡ください！ • 知見を貯めて、公開してください！