How to Boost Your Code with WebAssembly

https://jsconf.jp/2019/talk/fuji-goro

Transcript

1. How to Boost Your Code
   with WebAssembly
   JSConf JP, 2019/11/30
   by FUJI Goro (@__gfx__)
   

   View Slide

2. ࣗݾ঺հ
   • FUJI Goro / @__gfx__
   • ͜͜਺೥͸΢ΣϒΤϯδχΞͱͯ͠ Rails/React/TypeScript/
   GraphQL ͋ͨΓͷٕज़Λ࢖ͬͯαʔϏε։ൃΛͯ͠·ͨ͠
   • ͜ͷτʔΫ͸झຯͰ @msgpack/msgpack Λ։ൃͨ͠ͱ͖
   ͷܦݧʹج͖ͮ·͢
   • ࠷ۙCDN providerͷFastlyʹస৬͠·ͨ͠
   • స৬͔ͯ͠Β͸ओʹCݴޠͰHTTP serverΛ։ൃͯ͠·͢
   

   View Slide

3. WebAssemblyͱ͸Կ͔
   

   View Slide

4. WebAssembly
   • ϒϥ΢βʹ౥ࡌ͢ΔόΠτίʔυͱͦͷॲཧ
   ܥͷ࢓༷
   • ΞηϯϒϦͱ͸͍͏͕ػցޠͱ1:1ରԠͰ͸ͳ
   ͍ʹ࣮ߦͷͨΊʹVM͕ඞཁɺ·ͨ͸΋͏Ұஈ
   ػցޠ΁ͷίϯύΠϧ͕ඞཁͰɺJSΑΓ͸଎
   ͍͕ػցޠΑΓ஗͍
   

   View Slide

5. WebAssemblyલ໷ (2012~)
   • EmscriptenʹΑͬͯC/C++ΛJSʹίϯύΠϧ͢Δ
   ͜ͱ͸Ͱ͖͍ͯͨ (2012~)
   • ྫ: https://github.com/gfx/perl.js (2014)
   • ͨͩ͜͠Ε͸ඇৗʹಈ࡞଎౓͕஗͔ͬͨ
   • JSͰCPUΛΤϛϡϨʔτ͢ΔͷͰ஗͍ͷ͸ٕज़
   తඞવͩͬͨ
   

   View Slide

6. WebAssembly (2015~)
   • 2015೥ʹWebAssemblyͷ࢓༷ͷٞ࿦͕։࢝
   • 2017೥ʹChrome, Safari, Firefox, Edgeͱ͍ͬͨϞμ
   ϯϒϥ΢βͰͷ v1.0 (“MVP”) αϙʔτ͕׬ྃ
   • 2019೥͸WASIͷൃද΍Bytecode Allienceͷൃ଍ͳ
   Ͳɺϒϥ΢β֎Ͱͷ༻్͕૿͑ͯ͘Δ
   • ݱࡏ͸SIMDͳͲͷ͞ΒͳΔػೳ(“post MVP”)͕ਐߦத
   

   View Slide

7. WebAssemblyͷՁ஋
   

   View Slide

8. WebAssemblyͷຊ࣭తͳՁ஋
   • ϒϥ΢βʹ͓͍ͯ͸JSͱͰ͖Δ͜ͱ͸ಉ͡
   • ͨͩʮ଎͍ʯ͜ͱ͕ѹ౗తՁ஋
   • ͜ΕʹΑΓɺJSͩͱ஗͗ͯ͢ݱ࣮తͰͳ͍ྨ
   ͷλεΫ͕ՄೳʹͳΔ
   • কདྷతʹWasmʹSIMDαϙʔτͳͲ͕ೖΔͱ
   Ұ૚ͦͷࠩ͸։͘
   

   View Slide

9. WebAssemblyͷ଎౓ͱ҆શੑ
   • ʮ଎͍ʯͱ͸͍͏΋ͷͷCΑΓ਺ഒ஗͍
   • ͜Ε͸҆શੑͷͨΊະఆٛಈ࡞ (UB) Λͳ͍ͯ͘͠Δ͔Β
   • ͨͱ͑͹ɺCͰ͸഑ྻͷൣғ֎΁ͷΞΫηε͸UB
   • WasmͰ͸֬อͨ͠ϝϞϦͷൣғ֎΁ͷΞΫηε΋ఆٛࡁΈ
   • ͜ͷ҆શੑ͕ͦ͜େ͖ͳར఺
   • UB͕ͳ͍͔Βͦ͜όάͷ͋ΔWasmͰ΋҆શʹ࣮ߦͰ͖Δ
   

   View Slide

10. WebAssemblyαϙʔτঢ়گ
    

    View Slide

11. WebAssmbly͸ݱ࣮ʹ࢖͑Δ͔
    • IE11Ҏ֎ͷϞμϯϒϥ΢β͸΄΅αϙʔτ
    • ιϑτ΢ΣΞ·ͨ͸ίϯϙʔωϯτશମΛ
    Wasmʹͯ͠࢖͏ࣄྫ͸૿͖͍͑ͯͯΔ
    

    View Slide

12. γΣΞΛ๮
    άϥϑͰදࣔ
    

    View Slide

13. ࢖͑Δ؀ڥ͕
    ΄΅ׂ
    γΣΞΛ๮
    άϥϑͰදࣔ
    

    View Slide

14. ࢖͑Δ؀ڥ͕
    ΄΅ׂ
    γΣΞΛ๮
    άϥϑͰදࣔ
    *&Ͱ͸
    ະαϙʔτ
    

    View Slide

15. ࢖͑Δ؀ڥ͕
    ΄΅ׂ
    γΣΞΛ๮
    άϥϑͰදࣔ
    *&Ͱ͸
    ະαϙʔτ
    6$#SPXTFS͸
    Ұ෦ΞδΞͰҰఆͷγΣΞ
    

    View Slide

16. WebAssembly࠾༻ࣄྫ
    • eBayͷࣄྫ - όʔίʔυεΩϟφ for Web
    • “WebAssembly at eBay - a Real-World Use Case”
    • https://tech.ebayinc.com/engineering/
    webassembly-at-ebay-a-real-world-use-case/
    • WasmؚΉ͍͔ͭ͘ͷ࣮૷Λฒྻʹ࣮ߦͯ͠࠷଎
    Ͱ੒ޭͨ݁͠ՌΛ࠾༻͢Δͱ͍͏ΞʔΩςΫνϟ
    

    View Slide

17. WebAssembly as a universal
    executable binary
    • ༨ஊ: WebAssembly͸͸ϢχόʔαϧͳόΠφϦͱͯ͠
    ੒௕ͭͭ͋͠Δ
    • ͜ΕΛਐΊ͍ͯΔͷ͕ Bytecode Allience ͱ͍͏ஂମ
    • ྫ: Lucet (Fastly→Bytecode Allience): WasmΛωΠςΟ
    ϒίʔυʹίϯύΠϧ͢ΔπʔϧΩοτ
    • Compute@Edge (Fastly): ͸LucetͰίϯύΠϧͨ͠
    WasmΛCDNͷΤοδαʔόʔͰ࣮ߦ͢Δ࢓૊Έ
    

    View Slide

18. WebAssemblyͷ଎౓ײ
    

    View Slide

19. ݴޠ͝ͱͷಈ࡞଎౓Πϝʔδ
    • Ϋϥε1 “θϩΦʔόʔϔου”
    • C, C++, Rust
    • Ϋϥε3 “ߴ଎ͳίϯύΠϥ”
    • Java, C#, Go, Swift
    • Ϋϥε5 “ߴ଎ͳΠϯλϓϦλ”
    • JavaScript (V8), Dart
    • Ϋϥε50 “ී௨ͷΠϯλϓϦλ”
    • Ruby, Python, Perl, PHP
    

    View Slide

20. WebAssemblyͷ଎౓ײ
    • WasmΛV8Ͱಈ͔͢৔߹ʮΫϥε5ͷதͰ͸଎
    ͍ํʯͱ͍͏ਫ४
    • ͭ·ΓɺJavaScript (V8) ΑΓ͸΄΅࣮֬ʹ଎͍
    ͕ɺJava΍Goͱൺ΂Δͱগ͠ྼΔਫ४
    • কདྷతʹ͸Ϋϥε3ʹೖΔͱ༧ଌ͞ΕΔ͕ɺͦ
    ΕͰ΋Ϋϥε1ʹ͸ٴͿ͜ͱ͸ͳ͍ͱࢥΘΕΔ
    

    View Slide

21. ࣮ࡍʹ΍ͬͯΈͨ
    

    View Slide

22. WebAssemblyʹΑΔߴ଎Խ
    • ੡඼શମΛ C / C++ / Rust / Go Ͱ࣮૷͠Wasmʹ
    ίϯύΠϧ͢Δ
    • ͦΕͳΓʹීٴ͠͸͡Ί͍ͯΔ
    • ੡඼ͷҰ෦ΛWasmʹίϯύΠϧͯ͠ߴ଎Խ͢Δ
    • ͜ͷτʔΫͰͷؔ৺ࣄ͸ͬͪ͜
    • ͜ͷ༻్ͷՁ஋͸ະ஌਺
    

    View Slide

23. ݴޠ: AssemblyScript
    • બ୒ࢶ: C / C++ / Rust / Go / AssemblyScript
    • ࠓճ͸ϥϯλΠϜ͕Ұ൪খͦ͞͏ͳ
    AssemblyScriptΛબ୒
    

    View Slide

24. AssemblyScript
    • TypeScriptͷαϒηοτΛߏจͱͯ͠ར༻ͨ͠શ͘
    ৽͍͠ϓϩάϥϛϯάݴޠ
    • ॻ͖ຯ͸TypeScriptΑΓ͸Cʹ͍ۙ
    • ͱ͍͏͔TypeScriptͷൽ͚ͩ࢒ͯ͠த਎Λ͘Γൈ
    ͍ͯCΛ٧Ί௚ͨ͠ݴޠͱ͍͏΂͖
    • ࣮ࡍʹ͸CΑΓ͸ߴػೳɺC++ΑΓ͸ශऑ
    

    View Slide

25. AssemblyScriptͷ࠷దԽث
    • AssemblyScriptͷόοΫΤϯυ͸Bynarien
    • Emscripten͕௕Β͘࢖͖࣮ͬͯͨ੷ͷ͋Δόο
    ΫΤϯυ
    • ʢ͍·͸Emscripten͸LLVM backendਪ͠ʣ
    • খ͞ͳؔ਺ͷΠϯϥΠϯԽͳͲɺجຊతͳ࠷ద
    Խ͸Bynarien͕΍ͬͯ͘ΕΔ
    

    View Slide

26. ςʔϚ: MessagePack࣮૷
    • ͦ΋ͦ΋WebAssembly͸όΠτྻ
    (ArrayBuffer) ͔͠ѻ͑ͳ͍ͷͰɺಘҙ෼໺͸
    ݶΒΕͦ͏
    • खݩͷίʔυͩͱMessagePack͸όΠφϦγ
    ϦΞϥΠβͳͷͰWasmͰߴ଎Խͷ༨஍͸͋
    Γͦ͏ͩͱ౿Μͩ
    

    View Slide

27. ϦϙδτϦ
    • https://github.com/msgpack/msgpack-
    javascript
    • v1.9.3 ݱࡏͷ࿩
    • npm install @msgpack/msgpack ͰΠϯείՄೳ
    • ͨͩ͠Wasm൛͸ݱࡏweb޲͚ͷϏϧυͰ͸࢖
    ΘΕͳ͍Α͏ʹͳ͍ͬͯΔ
    

    View Slide

28. ࣮૷
    • MessagePack decoderͷҰ෦ɺจࣈྻͷσίʔυΛ
    JS / Wasm (AS) ͰͦΕͧΕͰ࣮૷ͨ͠ɻ·ͨV8૊Έ
    ࠐΈͷಉ͡ڍಈͷωΠςΟϒίʔυؔ਺΋ϕϯν
    ϚʔΫର৅ͱͨ͠
    • ΍͍ͬͯΔ͜ͱ͸UTF-8ͷ഑ྻΛUTF-16ͷ഑ྻʹม
    ׵͢Δ͜ͱ
    • AssemblyScriptʹҠ২ͯ͠100ߦఔ౓ͷίʔυ
    

    View Slide

29. JS൛ͷίʔυʢൈਮʣ
    export function utf8DecodeJs(bytes: Uint8Array, inputOffset: numbe
    byteLength: number): string {
    let offset = inputOffset;
    const end = offset + byteLength;
    const units: Array = [];
    while (offset < end) {
    const byte1 = bytes[offset++];
    if ((byte1 & 0x80) === 0) {
    // 1 byte
    units.push(byte1);
    }
    // ...
    }
    return String.fromCharCode(...units);
    }
    

    View Slide

30. ωΠςΟϒίʔυ൛ͷίʔυ
    const sharedTextDecoder = new TextDecoder();
    export function utf8DecodeTD(bytes: Uint8Array, inputOffset: numbe
    byteLength: number): string {
    const stringBytes = bytes.subarray(inputOffset, inputOffset +
    byteLength);
    return sharedTextDecoder!.decode(stringBytes);
    }
    

    View Slide

31. AS൛ͷίʔυʢൈਮ, AS 0.6ʣ
    export function utf8DecodeToUint16Array(outputPtr: usize, inputPtr:
    usize, byteLength: usize): usize {
    let inputOffset = inputPtr;
    let outputOffset = outputPtr;
    let inputOffsetEnd = inputOffset + byteLength;
    const u16s = sizeof();
    while (inputOffset < inputOffsetEnd) {
    let byte1: u16 = load(inputOffset++);
    if ((byte1 & 0x80) === 0) {
    // 1 byte
    store(outputOffset, byte1);
    outputOffset += u16s;
    }
    }
    return (outputOffset - outputPtr) / u16s;
    }
    

    View Slide

32. AS൛ͷίʔυʢJSଆʣ
    // wm = InstantiatedWasmModule.exports
    type pointer = number; // 32-bit integer
    export function utf8DecodeWasm(bytes: Uint8Array, inputOffset: numbe
    byteLength: number): string {
    const inputPtr: pointer = wm.malloc(byteLength);
    const outputPtr: pointer = wm.malloc(byteLength * 2);
    try {
    setMemoryU8(inputPtr, bytes.subarray(inputOffset, inputOffset +
    byteLength), byteLength);
    const outputArraySize = wm.utf8DecodeToUint16Array(outputPtr,
    inputPtr, byteLength);
    const units = new Uint16Array(wm.memory.buffer, outputPtr,
    outputArraySize);
    return String.fromCharCode(...units);
    } finally {
    wm.free(inputPtr);
    wm.free(outputPtr);
    }
    }
    

    View Slide

33. Wasm function΁ͷೖྗ
    • Wasmʹ౉ͤΔ஋͸2छྨ
    • (1) WASM functionͷݺͼग़͠ͷҾ਺ͱͯ͠ɺ೚ҙݸͷ੔਺·ͨ͸ුಈখ
    ਺఺਺
    • (2) WASM moduleͷbuffer: ArrayBufferʹ஋Λॻ͖ࠐΉɻArrayBufferʹॻ
    ͖ࠐΊΔ஋ͳΒͳΜͰ΋OK
    • Ͳ͜ʹॻ͖ࠐΜ͔ͩͷoffset (੔਺) Λ(1)ͱͯ͠Ҿ਺ͱͯ͠౉͢
    • Cݴޠతʹݴ͑͹͜Ε͕ϙΠϯλͱ౳Ձ
    • ASͰ͸ load(offset) ؔ਺ͰಡΈग़ͤΔ
    

    View Slide

34. Wasm function͔Βͷग़ྗ
    • ੔਺·ͨ͸ුಈখ਺఺਺1͚ͭͩ
    • ʢWasmతʹ͸೚ҙͷ਺ͷ஋ΛฦͤΔʣ
    • ࠓճ͸ೖྗ஋ͱͯ͠outputPtr (offset) Λ౉͠ɺ
    Wasm function͸ग़ྗ஋ΛoutputPtrͷҐஔʹॻ
    ͖ࠐΈɺॻ͖ࠐΜͩαΠζΛWasm function͔
    Βฦ͢ͱ͍͏͜ͱʹͨ͠
    

    View Slide

35. Wasm functionͷγάωνϟ
    • ίϝϯτ͖ͭͰ࠶ܝ͢Δͱɺ͜Μͳײ͡
    export function utf8DecodeToUint16Array(
    outputPtr: usize, // output offset
    inputPtr: usize, // input offset
    byteLength: usize, // input length
    ): usize; // output length
    

    View Slide

36. AssemblyScriptͷϋϚΓͲ͜Ζ
    • ϙΠϯλܕ͸ͳ͘ɺΦϑηοτͱͯ͠ usize (uint32_t) ܕ͕͋Δ͚ͩ
    • load() / store() ͳͲ͸ϦτϧΤϯσΟΞϯͱنఆ͞Εͯ
    ͍Δ͕ɺJSଆͷtyped arrays (Uint16Array) ͸ϗετͷΤϯσΟΞϯ
    ͳͷͰ࢓༷తʹ͸ΤϯσΟΞϯޓ׵ੑ͕ͳ͍
    • ͔͠͠ɺ͖ΐ͏ͼͷϚγϯ͸΄΅͢΂ͯϦτϧΤϯσΟΞϯͳͷ
    ͰɺԿ΋ߟ͑ͳͯ͘΋ಈ͍ͯ͠·͏ʢASͷ໰୊Ͱ͸ͳ͍͕ʣ
    • ݟͨ໨͕TypeScriptͳ͜ͱʹؾ͕࣋ͪҾ͖ͣΒΕͯຌϛε͕සൃ͢Δ
    

    View Slide

37. AS (v0.8 or later)ͷϋϚΓͲ͜Ζ
    • ͳ͓ݱߦόʔδϣϯ (v0.8) ͸ϦϑΝϨϯεΧ
    ΢ϯτϥϯλΠϜ͕௥Ճ͞ΕͨͷͰJSͱͷ૬
    ޓӡ༻͕ΑΓ೉͘͠ͳͬͨ
    • msgpack-javascript͸AS 0.8ʹରԠͰ͖͍ͯ
    ͳ͍……
    

    View Slide

38. ϕϯνϚʔΫ
    

    View Slide

39. ؀ڥ
    • macOS 10.14
    • NodeJS 12.6.0
    • v8 7.5 ʢChrome 75૬౰ʣ
    • ࠓճ͸NodeJSͷΈͰϕϯνϚʔΫΛͨ͠
    

    View Slide

40. ϕϯνϚʔΫίʔυ
    • https://gist.github.com/gfx/
    e3e33c80848f734a81dbd030fca16230
    • “A”.repeat(N) ʢN͸σʔλαΠζʣͱ͍͏
    σʔλΛUTF-8Τϯίʔυͨ͠όΠτྻΛɺ
    JS൛ / Wasm൛ / ωΠςΟϒίʔυ൛ͷؔ਺Ͱ
    จࣈྻʹσίʔυ͢Δ
    

    View Slide

41. νϟʔτͷݟํ
    • ॎ࣠͸ log10 (ops per sec)
    • ͦͷ··ͩͱݟͮΒ͍ͷͰର਺ʹͯ͋͠Δ
    • ஋͕େ͖͍΄Ͳੑೳ͕Α͍
    • ԣ࣠͸σʔλαΠζ
    • ಉ͡σʔλαΠζಉ࢜Ͱൺֱ͢Δ͜ͱ
    • σʔλαΠζ͕ҟͳΔσʔλͷൺֱ͸ແҙຯ
    

    View Slide

42. ϕϯνϚʔΫ݁Ռ
    0
    2
    4
    6
    8
    10 100 200 500 1000 10000
    utf8DecodeJs utf8DecodeWasm TextDecoder
    default, NodeJS/v12.6.0, v8/7.5
    

    View Slide

43. νϟʔτ͔ΒಡΈऔΕΔ͜ͱ
    • σʔλαΠζ͕খ͍͞ͱ͖͸JS൛͕࠷଎
    • Wasm൛ / ωΠςΟϒίʔυ൛͸ॲཧࣗମ͸ߴ଎
    ͕ͩݺͼग़͠ͷΦʔόʔϔου͕େ͖͍ͨΊ
    • σʔλαΠζ͕େ͖͘ͳΔͱ ωΠςΟϒίʔυ൛
    >> Wasm൛ > JS൛
    • ͦ΋ͦ΋JS൛ͱWasm൛Ͱ΄ͱΜͲࠩ͸ͳ͍
    

    View Slide

44. JS൛ͱWasm൛ͷ͕ࠩͳ͍ʁʁ
    • ͔֬ʹσʔλαΠζ͕େ͖͘ͳΔͱWasm൛ͷ΄͏
    ͕গ͚ͩ͠ͱ͸͍ܾ͑ఆతʹ଎͍
    • ͔ͦ͠͠ͷࠩ͸͍͍ͤͥ਺%͔Β਺े%Ͱɺ։ൃ޻
    ਺Λߟ͑ΔͱWasm൛ͷίεύ͸Α͘ͳ͍
    • AssemblyScript͕ͭΒ͍ͱ͍͏͜ͱ΋͋Δ͕ɺͦ
    ΋ͦ΋ݴޠΛ·͙ͨάϧʔίʔυΛϝϯς͢Δͷ
    ͸ٕज़తͳ೉қ౓͕ߴ͘ɺίεύѱ͍ײ͕ڧ͍
    

    View Slide

45. Wasm൛͸͋·Γҙຯ͕ͳ͍ʁ
    • ୯७ʹઌͷϕϯνϚʔΫ݁ՌΛղऍ͢Δͱɺ
    WasmͰίʔυͷҰ෦Λ࠷దԽ͢Δͷ͸ίε
    ύ͕ѱ͍Α͏ʹΈ͑Δ
    • ͔͠͠ɺઌͷϕϯνϚʔΫ͸V8ͷ࠷దԽίϯ
    ύΠϥTurboFan͕े෼ʹ࠷దԽJITΛͨ݁͠Ռ
    

    View Slide

46. V8ͷΞʔΩςΫνϟ(2017)
    

    View Slide

47. ࠷దԽίϯύΠϥ TurboFan
    • ϗοτεϙοτΛ࠷దԽ͢ΔJITίϯύΠϥ
    • ΢ΣϒϖʔδͷॳճಡΈࠐΈ͔࣌Βૢ࡞Մೳʹ
    ͳΔ·Ͱͷؒ͸ɺTurboFanʹΑΔ࠷దԽ͕·ͩ
    ޮ͍ͯͳ͍Մೳੑ͕͋Δ
    • ͭ·ΓTurboFanͷੑೳΛଌΔϕϯνϚʔΫ͕ຊ
    ൪؀ڥʹ͓͚Δ଎౓Λଌ͍ͬͯΔͱ͸ݶΒͳ͍
    

    View Slide

48. v8 —no-opt
    • v8ͷ࠷దԽΛແޮʹ࣮ͯ͠ߦ͢ΔΦϓγϣϯ
    • nodejsͰ΋͜ͷΦϓγϣϯ͕࢖͑Δ
    • ͜ͷΦϓγϣϯʹΑΓɺͨͱ͑͹ҰॠͰ࣮ߦ
    Λऴ͑ΔίϚϯυϥΠϯπʔϧ΍΢Σϒϖʔ
    δͷॳظԽίʔυͷ࣮ߦͳͲͷ؀ڥΛΤϛϡ
    ϨʔτͰ͖Δ
    

    View Slide

49. nodejs —no-opt Ͱ࠶ܭଌ
    

    View Slide

50. ϕϯνϚʔΫ݁Ռ (—no-opt)
    0
    2
    4
    6
    8
    10 100 200 500 1000 10000
    utf8DecodeJs utf8DecodeWasm TextDecoder
    --no-opt NodeJS v12.6.0, v8 7.5 on macOS
    

    View Slide

51. ϕϯνϚʔΫ݁Ռ (default)
    0
    2
    4
    6
    8
    10 100 200 500 1000 10000
    utf8DecodeJs utf8DecodeWasm TextDecoder
    default, NodeJS/v12.6.0, v8/7.5
    

    View Slide

52. 2ͭͷ݁Ռ͔ΒಡΈऔΕΔ͜ͱ
    • ࠷దԽ͕ޮ͔ͳ͍ͱ͖͸͔ͳΓখ͍͞σʔλα
    ΠζͰ΋ Wasm൛ >> JS൛
    • ࠷దԽ͕ޮ͍͍ͯͯ΋ɺσʔλ͕খ͍͞έʔε
    Λআ͖Wasm൛ͷ΄͏͕JS൛ΑΓগ͠଎͍
    • ωΠςΟϒίʔυ͸σʔλαΠζ͕େ͖͍΄Ͳ
    ଞͷ࣮૷ͱͷ͕ࠩେ͖͍͕ɺ௨ৗ͸ར༻ෆՄ
    

    View Slide

53. ·ͱΊ
    

    View Slide

54. ঢ়گ࣍ୈͰ͸ݕ౼ͷՁ஋͋Γ
    • ʮWebAssemblyͰίʔυͷҰ෦Λߴ଎Խ͢
    Δʯ͸Մೳ͕ͩɺίεύ͕ѱ͍
    • Wasm͸JSͷ࠷దԽίϯύΠϥʹґଘͤͣ҆
    ఆͯ͠ߴ଎ͳͷͰɺঢ়گ࣍ୈͰ͸ޮՌత
    • ྫ͑͹ɺeBayࣄྫ͸WasmΛߴ଎ԽͷͨΊʹ
    ར༻͢Δͷʹཧ૝తͳϢʔεέʔε
    

    View Slide

55. ݕ౼ͷՁ஋ͷ͋Δঢ়گ
    • ͻͱͭͷγϯϓϧͳλεΫʹ20msҎ্͔͔Δ͜ͱ
    • 1.5ഒʹߴ଎Խ͢Δͱͯ͠ɺ1ϑϨʔϜ (1/60 sec)
    Ͱऩ·Βͳ͍λεΫ͕1ϑϨʔϜʹऩ·ΔΑ͏ʹ
    ͳΔ͘Β͍ͷظ଴ײ
    • ७ਮʹ਺஋ܭࢉ΍όΠτྻͷॲཧͰ͋Δ͜ͱ
    • ΦϒδΣΫτ΍DOMͷབྷΉॲཧ͸·ͩۤख
    

    View Slide

56. Any questions?
    • ࣭໰͸ twitter.com/__gfx__ ·Ͱʂ
    

    View Slide