off-the-main-thread with WorkerDOM

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も動かせるので、ぜひ試してみてください。

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

January 12, 2019
Tweet

Transcript

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

  2. ฏ໺ ণ࢜ / Masashi Hirano ɹɹɹɹ Kyoto office @shisama_ @shisama

    Node.js Core Collaborator ؔ੢NodeֶԂOrganizer
  3. αΠϘ΢ζେࡕΦϑΟε കాࡕٸΦϑΟεϏϧ

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

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

    React)
  6. Performance

  7. Performance • ͦ΋ͦ΋Web͸ૣ͍ • ଟػೳ΍ϦονͳUIΛఏڙ͢Δ͔Β஗͘ͳΔ • ஗͘ͳΔͷʹ΋༷ʑͳཁҼ͕͋Δ
 ɾωοτϫʔΫ
 ɾϨϯμϦϯά
 ɾJavaScript

    etc…
  8. Performance • ωοτϫʔΫͷ໰୊͸վળ͞Ε͖ͯͨ
 ɾϦΫΤετճ਺ͷ࡟ݮ
 ɾCache
 ɾHTTP/2 etc… • JavaScriptͷ࣮ߦ΍ϨϯμϦϯά͕ϘτϧωοΫʹͳ͖ͬͯͨ •

    ࠷ۙ͸ϑϩϯτΤϯυͰCPUϔϏʔͳॲཧ͕࣮ߦ͞ΕΔ
  9. ϝΠϯεϨουͰscripting΍rendering͕ ߦΘΕ͍ͯΔ

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

  11. off-the-main-thread

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

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

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

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

  16. WebWorker

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

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

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

  20. WebWorkerͱ͸ • JavaScriptͰ΋ϚϧνεϨου͕࢖༻Մೳ • Worker༻ͷJSϑΝΠϧΛ༻ҙͯ͠WorkerεϨουͰ࣮ߦ • ͓ޓ͍ͷεϨου͸ಠཱͨ͠ϝϞϦྖҬΛ֬อ͍ͯ͠Δ
 ɾεϨουA͔ΒεϨουBͷ஋ʹ͸ΞΫηεͰ͖ͳ͍
 ɾεϨουؒ͸ϝοηʔδύογϯάͰσʔλΛ΍ΓऔΓ͢Δ

  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༻ϑΝΠϧ
  22. http://nerget.com/rayjs-mt/rayjs.html ը૾ॲཧͰൺֱ ࠨ: Workerͳ͠ 1.647s ӈ: 4ͭͷWorker 0.765

  23. WebWorkerͷ՝୊ • postMessage͸ϝϞϦͷڞ༗Ͱ͸ͳ͘ίϐʔΛ౉͍ͯ͠Δ
 • postMessage࢖͍ͮΒ͘ͳ͍…?
 • Worker಺ͰDOMૢ࡞͕Ͱ͖ͳ͍

  24. WebWorkerͷ՝୊ • postMessage͸ϝϞϦͷڞ༗Ͱ͸ͳ͘ίϐʔΛ౉͍ͯ͠Δ
 SharedArrayBufferͱAtomics APIΛ࢖͏ • postMessage࢖͍ͮΒ͘ͳ͍…?
 Comlink΍ClooneyΛ࢖͏ • Worker಺ͰDOMૢ࡞͕Ͱ͖ͳ͍


    WorkerDOMΛ࢖͏
  25. WebWorkerͷ՝୊ • postMessage͸ϝϞϦͷڞ༗Ͱ͸ͳ͘ίϐʔ
 SharedArrayBufferͱAtomics APIΛ࢖͏ • postMessage࢖͍ͮΒ͘ͳ͍…?
 Comlink΍ClooneyΛ࢖͏ • Worker಺ͰDOMૢ࡞͕Ͱ͖ͳ͍


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

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

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

  29. WorkerDOM

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

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

  32. WorkerDOM࢖͍ํ • npm
 npm install @ampproject/worker-dom • CDN
 https://unpkg.com/@ampproject/worker-dom@0.2.8

  33. <div src=“worker_thread.js” id=“upgrade-me“></div> <script type="module"> import {upgradeElement} from ‘/path/to/index.mjs’; upgradeElement(document.getElementById(‘upgrade-me'),

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

    ‘/path/to/worker.mjs’); </script> WorkerDOM࢖͍ํ 1. WorkerଆͰ࣮ߦ͢ΔϑΝΠϧΛࢦఆ 2. worker-domͷindex.mjs͔ΒupgradeElementؔ਺Λimport 3. 1ͷDOMͱworker-domͷworker.mjsΛҾ਺ʹઃఆ࣮͠ߦ
  35. WorkerDOMͰԿ͕Ͱ͖Δͷ͔ • ͢΂ͯͷॲཧΛWorkerଆʹҕৡ͢Δ͜ͱ͕Ͱ͖Δ͔΋ • AMPͰ΋೚ҙͷJavaScriptΛ࣮ߦͰ͖Δ͔΋
 ɾamp-script͸಺෦ͰWorkerDOMΛ࢖͍ͬͯΔ • React΍VueͳͲ΋Worker಺Ͱ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ
 ɾampproject/worker-domʹ͸preactΛಈ͔͢σϞ͕͋Δ
 ɾWorkerDOM

    + React ࢼͯ͠Έͨ

  36. <!DOCTYPE html> <div src="./dist/app.js" id="hello"> <div id="root"></div> </div> <script type="module">

    import {upgradeElement} from '/dist/index.mjs'; upgradeElement(document.getElementById(‘hello’), '/dist/worker.mjs'); </script> WorkerDOM + React const App = () => { return <h1>Hello, World!</h1>; }; ReactDOM.render(<App />, document.getElementById('root')); HTML (ϝΠϯεϨου) : Worker༻ϑΝΠϧ :
  37. <!DOCTYPE html> <div src="./dist/app.js" id="hello"> <div id="root"></div> </div> <script type="module">

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

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

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

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

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

  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)
  44. Thanks.