off-the-main-thread with WorkerDOM

Kyoto.js #15( https://kyotojs.connpass.com/event/113442/ )の発表資料です。
WebWorkerの基本やWorkerDOM( https://github.com/ampproject/worker-dom )の紹介をしました。
WorkerDOMを使うとWorkerでReactも動かせるので、ぜひ試してみてください。

Transcript

1. Off-the-main-thread
   with
   WorkerDOM
   Kyoto.js #15
   ฏ໺ ণ࢜(@shisama)
   

   View Slide

2. ฏ໺ ণ࢜ / Masashi Hirano
   ɹɹɹɹ Kyoto office
   @shisama_
   @shisama
   Node.js Core Collaborator
   ؔ੢NodeֶԂOrganizer
   

   View Slide

3. αΠϘ΢ζେࡕΦϑΟε
   കాࡕٸΦϑΟεϏϧ
   

   View Slide

4. ஫ҙ
   ࠓճग़ͯ͘Δ࿩͸
   ·ͩٞ࿦தͷ಺༰΋
   ؚ·Ε͍ͯ·͢
   

   View Slide

5. Agenda
   • Performance
   • off-the-main-thread
   • WebWorker
   • WorkerDOM (+ React)
   

   View Slide

6. Performance
   

   View Slide

7. Performance
   • ͦ΋ͦ΋Web͸ૣ͍
   • ଟػೳ΍ϦονͳUIΛఏڙ͢Δ͔Β஗͘ͳΔ
   • ஗͘ͳΔͷʹ΋༷ʑͳཁҼ͕͋Δ

   ɾωοτϫʔΫ

   ɾϨϯμϦϯά

   ɾJavaScript etc…
   

   View Slide

8. Performance
   • ωοτϫʔΫͷ໰୊͸վળ͞Ε͖ͯͨ

   ɾϦΫΤετճ਺ͷ࡟ݮ

   ɾCache

   ɾHTTP/2 etc…
   • JavaScriptͷ࣮ߦ΍ϨϯμϦϯά͕ϘτϧωοΫʹͳ͖ͬͯͨ
   • ࠷ۙ͸ϑϩϯτΤϯυͰCPUϔϏʔͳॲཧ͕࣮ߦ͞ΕΔ
   

   View Slide

9. ϝΠϯεϨουͰscripting΍rendering͕
   ߦΘΕ͍ͯΔ
   

   View Slide

10. ChromeͷAudits(Lighthouse)Ͱ
    PerformanceΛܭଌ͢ΔͱϝΠϯεϨουͷ
    JSͷॲཧΛݮΒ͢Α͏ʹڭ͑ͯ͘ΕΔ
    

    View Slide

11. off-the-main-thread
    

    View Slide

12. off-the-main-threadͱ͸
    • ϝΠϯεϨουͱ͸ผεϨουʹॲཧΛҕৡ͢Δ͜ͱ
    • ϝΠϯεϨουΛઐ༗͢ΔͱUI΍ϢʔβʔΠϯλϥΫγϣϯͷॲ
    ཧ͕ϒϩοΫ͞ΕΔ
    • 16msҎ্ϝΠϯεϨουΛࢭΊͪΌμϝ
    

    View Slide

13. 
    6TFS*OUFSBDUJPO
    'FFECBDL
    )FBWZ5BTL
    ϝΠϯεϨουΛઐ༗
    UIʹϥά͕ੜ͡Δ
    ΧΫ͖ͭɾ΋͖ͨͭΛײ͡Δ
    

    View Slide

14. 
    $BMM
    )FBWZ
    5BTL
    3FTQPOTF
    'FFECBDL
    6TFS*OUFSBDUJPO
    'FFECBDL
    .BJO5ISFBE 0UIFS5ISFBE
    

    View Slide

15. 
    )FBWZ
    5BTL
    'FFECBDL
    6TFS*OUFSBDUJPO
    'FFECBDL
    $BMM
    3FTQPOTF
    .BJO5ISFBE 0UIFS5ISFBE
    Ͳ͏΍ͬͯ΍Δ…?
    

    View Slide

16. WebWorker
    

    View Slide

17. https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API
    

    View Slide

18. https://caniuse.com/#feat=webworkers
    

    View Slide

19. https://github.com/nodejs/node/pull/25361
    

    View Slide

20. WebWorkerͱ͸
    • JavaScriptͰ΋ϚϧνεϨου͕࢖༻Մೳ
    • Worker༻ͷJSϑΝΠϧΛ༻ҙͯ͠WorkerεϨουͰ࣮ߦ
    • ͓ޓ͍ͷεϨου͸ಠཱͨ͠ϝϞϦྖҬΛ֬อ͍ͯ͠Δ

    ɾεϨουA͔ΒεϨουBͷ஋ʹ͸ΞΫηεͰ͖ͳ͍

    ɾεϨουؒ͸ϝοηʔδύογϯάͰσʔλΛ΍ΓऔΓ͢Δ
    

    View Slide

21. // workerͰ࣮ߦ͢ΔϑΝΠϧΛࢦఆ͠workerੜ੒
    const worker = new Worker(“./worker.js");
    // workerʹσʔλΛ౉͢
    worker.postMessage(time);
    // workerଆ͔ΒσʔλΛड͚औͬͨͱ͖
    worker.onmessage = (e) => {
    const el = document.createElement('div');
    el.textContent = e.data;
    document.body.appendChild(el);
    }
    εϨουؒͷσʔλڞ༗
    // ϝΠϯεϨου͔ΒσʔλΛड͚औͬͨͱ͖
    onmessage = (e) => {
    const n = e.data;
    for (let i = 0; i <= n; i++) {
    // Կ͔ॏ͍ॲཧ
    // ॲཧ݁ՌΛϝΠϯεϨουʹ౉͢
    postMessage(result);
    }
    }
    ϝΠϯεϨου Worker༻ϑΝΠϧ
    

    View Slide

22. http://nerget.com/rayjs-mt/rayjs.html
    ը૾ॲཧͰൺֱ
    ࠨ: Workerͳ͠ 1.647s
    ӈ: 4ͭͷWorker 0.765
    

    View Slide

23. WebWorkerͷ՝୊
    • postMessage͸ϝϞϦͷڞ༗Ͱ͸ͳ͘ίϐʔΛ౉͍ͯ͠Δ

    • postMessage࢖͍ͮΒ͘ͳ͍…?

    • Worker಺ͰDOMૢ࡞͕Ͱ͖ͳ͍
    

    View Slide

24. WebWorkerͷ՝୊
    • postMessage͸ϝϞϦͷڞ༗Ͱ͸ͳ͘ίϐʔΛ౉͍ͯ͠Δ

    SharedArrayBufferͱAtomics APIΛ࢖͏
    • postMessage࢖͍ͮΒ͘ͳ͍…?

    Comlink΍ClooneyΛ࢖͏
    • Worker಺ͰDOMૢ࡞͕Ͱ͖ͳ͍

    WorkerDOMΛ࢖͏
    

    View Slide

25. WebWorkerͷ՝୊
    • postMessage͸ϝϞϦͷڞ༗Ͱ͸ͳ͘ίϐʔ

    SharedArrayBufferͱAtomics APIΛ࢖͏
    • postMessage࢖͍ͮΒ͘ͳ͍…?

    Comlink΍ClooneyΛ࢖͏
    • Worker಺ͰDOMૢ࡞͕Ͱ͖ͳ͍

    WorkerDOMΛ࢖͏
    

    View Slide

26. http://2ality.com/2017/01/shared-array-buffer.html
    ࢀߟ: SharedArrayBufferͱAtomics API
    https://qiita.com/yosuke_furukawa/items/923f8d40c451713dfbd3
    

    View Slide

27. https://github.com/GoogleChromeLabs/comlink
    ࢀߟ: Comlink
    

    View Slide

28. https://github.com/GoogleChromeLabs/clooney
    ࢀߟ: Clooney
    

    View Slide

29. WorkerDOM
    

    View Slide

30. https://github.com/ampproject/worker-dom
    

    View Slide

31. WorkerDOMͱ͸
    • WebWorkerͰDOMૢ࡞Λߦ͏ͨΊͷϥΠϒϥϦ
    • AMP(Accelerated Mobile Pages)ϓϩδΣΫτ͕։ൃ
    • ·ͩalpha൛
    

    View Slide

32. WorkerDOM࢖͍ํ
    • npm

    npm install @ampproject/worker-dom
    • CDN

    https://unpkg.com/@ampproject/worker-dom@0.2.8
    

    View Slide

33. 
    <br/>import {upgradeElement} from ‘/path/to/index.mjs’;<br/>upgradeElement(document.getElementById(‘upgrade-me'), ‘/path/to/worker.mjs’);<br/>
    WorkerDOM࢖͍ํ
    for (let i = 0; i <= n; i++) {
    // Կ͔ॏ͍ॲཧ
    // ॲཧ݁ՌΛϝΠϯεϨουʹ౉͢
    const el = document.createElement('div');
    el.textContent = result;
    document.body.appendChild(el);
    }
    HTML (ϝΠϯεϨου) :
    Worker༻ϑΝΠϧ :
    

    View Slide

34. 
    <br/>import {upgradeElement} from ‘/path/to/index.mjs’;<br/>upgradeElement(document.getElementById(‘upgrade-me'), ‘/path/to/worker.mjs’);<br/>
    WorkerDOM࢖͍ํ
    1. WorkerଆͰ࣮ߦ͢ΔϑΝΠϧΛࢦఆ
    2. worker-domͷindex.mjs͔ΒupgradeElementؔ਺Λimport
    3. 1ͷDOMͱworker-domͷworker.mjsΛҾ਺ʹઃఆ࣮͠ߦ
    

    View Slide

35. WorkerDOMͰԿ͕Ͱ͖Δͷ͔
    • ͢΂ͯͷॲཧΛWorkerଆʹҕৡ͢Δ͜ͱ͕Ͱ͖Δ͔΋
    • AMPͰ΋೚ҙͷJavaScriptΛ࣮ߦͰ͖Δ͔΋

    ɾamp-script͸಺෦ͰWorkerDOMΛ࢖͍ͬͯΔ
    • React΍VueͳͲ΋Worker಺Ͱ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ

    ɾampproject/worker-domʹ͸preactΛಈ͔͢σϞ͕͋Δ

    ɾWorkerDOM + React ࢼͯ͠Έͨ

    

    View Slide

36. 
    
    
    
    <br/>import {upgradeElement} from '/dist/index.mjs';<br/>upgradeElement(document.getElementById(‘hello’), '/dist/worker.mjs');<br/>
    WorkerDOM + React
    const App = () => {
    return Hello, World!;
    };
    ReactDOM.render(, document.getElementById('root'));
    HTML (ϝΠϯεϨου) :
    Worker༻ϑΝΠϧ :
    

    View Slide

37. 
    
    
    
    <br/>import {upgradeElement} from '/dist/index.mjs';<br/>upgradeElement(document.getElementById(‘hello’), '/dist/worker.mjs');<br/>
    WorkerDOM + React
    const App = () => {
    return Hello, World!;
    };
    ReactDOM.render(, document.getElementById('root'));
    HTML (ϝΠϯεϨου) :
    Worker༻ϑΝΠϧ :
    Workerଆ͔ΒΞΫηε͍ͨ͠DOM͸
    upgradeElementͰࢦఆ͢ΔDOMͷதʹॻ͘
    

    View Slide

38. https://shisama.github.io/worker-dom-sample/react-app/
    create-react-app
    

    View Slide

39. https://shisama.github.io/worker-dom-sample/react-app/
    WorkerεϨουͰ࣮ߦ͞Ε͍ͯΔ͔֬ೝ
    

    View Slide

40. https://shisama.github.io/worker-dom-sample/react-app/
    WorkerεϨουͰ࣮ߦ͞Ε͍ͯΔ͔֬ೝ
    

    View Slide

41. preact demo@ampproject/worker-dom
    https://github.com/ampproject/worker-dom/tree/master/demo/preact-dbmon
    

    View Slide

42. ·ͱΊ
    • ϝΠϯεϨουͰϔϏʔͳॲཧΛ͍ͯ͠ͳ͍͔֬ೝ͠Α͏
    • WebWorkerͰϔϏʔͳॲཧΛϝΠϯεϨου͔Βಀ͕ͦ͏
    • WorkerDOMΛ࢖͏ͱWebWorkerͰ΋DOMૢ࡞͕ՄೳʹͳΔ
    • ReactͳͲ΋Worker಺Ͱ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

43. ࢀߟ
    • ΢Σϒϒϥ΢βͷ off-the-main-thread API ͷ࿩ (@nhiroki)
    • Off the main thread with workers ! - Speaker Deck (@kosamari)
    • off-the-main-thread ͷ࣌୅ (@mizchi)
    • Off the main threadͷ࿩ - Speaker Deck (@yosuke_furukawa)
    • Web WorkersΛ༻͍ͯJavaScriptΛϚϧνεϨουԽ͢Δ (@kfurumiya)
    

    View Slide

44. Thanks.
    

    View Slide