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)
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 )FBWZ
    5BTL ϝΠϯεϨουΛઐ༗ UIʹϥά͕ੜ͡Δ ΧΫ͖ͭɾ΋͖ͨͭΛײ͡Δ
14. $BMM )FBWZ
    5BTL 3FTQPOTF 'FFECBDL 6TFS
    *OUFSBDUJPO 'FFECBDL .BJO
    5ISFBE 0UIFS
    5ISFBE
15. )FBWZ
    5BTL 'FFECBDL 6TFS
    *OUFSBDUJPO 'FFECBDL $BMM 3FTQPOTF .BJO
    5ISFBE 0UIFS
    5ISFBE Ͳ͏΍ͬͯ΍Δ…?
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.