Slide 1
Slide 1 text
Off-the-main-thread
with
WorkerDOM
Kyoto.js #15
ฏ ণ࢜(@shisama)
Slide 2
Slide 2 text
ฏ ণ࢜ / Masashi Hirano
ɹɹɹɹ Kyoto office
@shisama_
@shisama
Node.js Core Collaborator
ؔNodeֶԂOrganizer
Slide 3
Slide 3 text
αΠϘζେࡕΦϑΟε
കాࡕٸΦϑΟεϏϧ
Slide 4
Slide 4 text
ҙ
ࠓճग़ͯ͘Δ
·ͩٞதͷ༰
ؚ·Ε͍ͯ·͢
Slide 5
Slide 5 text
Agenda
• Performance
• off-the-main-thread
• WebWorker
• WorkerDOM (+ React)
Slide 6
Slide 6 text
Performance
Slide 7
Slide 7 text
Performance
• ͦͦWebૣ͍
• ଟػೳϦονͳUIΛఏڙ͢Δ͔Β͘ͳΔ
• ͘ͳΔͷʹ༷ʑͳཁҼ͕͋Δ
ɾωοτϫʔΫ
ɾϨϯμϦϯά
ɾJavaScript etc…
Slide 8
Slide 8 text
Performance
• ωοτϫʔΫͷվળ͞Ε͖ͯͨ
ɾϦΫΤετճͷݮ
ɾCache
ɾHTTP/2 etc…
• JavaScriptͷ࣮ߦϨϯμϦϯά͕ϘτϧωοΫʹͳ͖ͬͯͨ
• ࠷ۙϑϩϯτΤϯυͰCPUϔϏʔͳॲཧ͕࣮ߦ͞ΕΔ
Slide 9
Slide 9 text
ϝΠϯεϨουͰscriptingrendering͕
ߦΘΕ͍ͯΔ
Slide 10
Slide 10 text
ChromeͷAudits(Lighthouse)Ͱ
PerformanceΛܭଌ͢ΔͱϝΠϯεϨουͷ
JSͷॲཧΛݮΒ͢Α͏ʹڭ͑ͯ͘ΕΔ
Slide 11
Slide 11 text
off-the-main-thread
Slide 12
Slide 12 text
off-the-main-threadͱ
• ϝΠϯεϨουͱผεϨουʹॲཧΛҕৡ͢Δ͜ͱ
• ϝΠϯεϨουΛઐ༗͢ΔͱUIϢʔβʔΠϯλϥΫγϣϯͷॲ
ཧ͕ϒϩοΫ͞ΕΔ
• 16msҎ্ϝΠϯεϨουΛࢭΊͪΌμϝ
Slide 13
Slide 13 text
6TFS*OUFSBDUJPO
'FFECBDL
)FBWZ5BTL
ϝΠϯεϨουΛઐ༗
UIʹϥά͕ੜ͡Δ
ΧΫ͖ͭɾ͖ͨͭΛײ͡Δ
Slide 14
Slide 14 text
$BMM
)FBWZ
5BTL
3FTQPOTF
'FFECBDL
6TFS*OUFSBDUJPO
'FFECBDL
.BJO5ISFBE 0UIFS5ISFBE
Slide 15
Slide 15 text
)FBWZ
5BTL
'FFECBDL
6TFS*OUFSBDUJPO
'FFECBDL
$BMM
3FTQPOTF
.BJO5ISFBE 0UIFS5ISFBE
Ͳ͏ͬͯΔ…?
Slide 16
Slide 16 text
WebWorker
Slide 17
Slide 17 text
https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API
Slide 18
Slide 18 text
https://caniuse.com/#feat=webworkers
Slide 19
Slide 19 text
https://github.com/nodejs/node/pull/25361
Slide 20
Slide 20 text
WebWorkerͱ
• JavaScriptͰϚϧνεϨου͕༻Մೳ
• Worker༻ͷJSϑΝΠϧΛ༻ҙͯ͠WorkerεϨουͰ࣮ߦ
• ͓ޓ͍ͷεϨουಠཱͨ͠ϝϞϦྖҬΛ֬อ͍ͯ͠Δ
ɾεϨουA͔ΒεϨουBͷʹΞΫηεͰ͖ͳ͍
ɾεϨουؒϝοηʔδύογϯάͰσʔλΛΓऔΓ͢Δ
Slide 21
Slide 21 text
// 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༻ϑΝΠϧ
Slide 22
Slide 22 text
http://nerget.com/rayjs-mt/rayjs.html
ը૾ॲཧͰൺֱ
ࠨ: Workerͳ͠ 1.647s
ӈ: 4ͭͷWorker 0.765
Slide 23
Slide 23 text
WebWorkerͷ՝
• postMessageϝϞϦͷڞ༗Ͱͳ͘ίϐʔΛ͍ͯ͠Δ
• postMessage͍ͮΒ͘ͳ͍…?
• WorkerͰDOMૢ࡞͕Ͱ͖ͳ͍
Slide 24
Slide 24 text
WebWorkerͷ՝
• postMessageϝϞϦͷڞ༗Ͱͳ͘ίϐʔΛ͍ͯ͠Δ
SharedArrayBufferͱAtomics APIΛ͏
• postMessage͍ͮΒ͘ͳ͍…?
ComlinkClooneyΛ͏
• WorkerͰDOMૢ࡞͕Ͱ͖ͳ͍
WorkerDOMΛ͏
Slide 25
Slide 25 text
WebWorkerͷ՝
• postMessageϝϞϦͷڞ༗Ͱͳ͘ίϐʔ
SharedArrayBufferͱAtomics APIΛ͏
• postMessage͍ͮΒ͘ͳ͍…?
ComlinkClooneyΛ͏
• WorkerͰDOMૢ࡞͕Ͱ͖ͳ͍
WorkerDOMΛ͏
Slide 26
Slide 26 text
http://2ality.com/2017/01/shared-array-buffer.html
ࢀߟ: SharedArrayBufferͱAtomics API
https://qiita.com/yosuke_furukawa/items/923f8d40c451713dfbd3
Slide 27
Slide 27 text
https://github.com/GoogleChromeLabs/comlink
ࢀߟ: Comlink
Slide 28
Slide 28 text
https://github.com/GoogleChromeLabs/clooney
ࢀߟ: Clooney
Slide 29
Slide 29 text
WorkerDOM
Slide 30
Slide 30 text
https://github.com/ampproject/worker-dom
Slide 31
Slide 31 text
WorkerDOMͱ
• WebWorkerͰDOMૢ࡞Λߦ͏ͨΊͷϥΠϒϥϦ
• AMP(Accelerated Mobile Pages)ϓϩδΣΫτ͕։ൃ
• ·ͩalpha൛
Slide 32
Slide 32 text
WorkerDOM͍ํ
• npm
npm install @ampproject/worker-dom
• CDN
https://unpkg.com/@ampproject/[email protected]
Slide 33
Slide 33 text
import {upgradeElement} from ‘/path/to/index.mjs’;
upgradeElement(document.getElementById(‘upgrade-me'), ‘/path/to/worker.mjs’);
WorkerDOM͍ํ
for (let i = 0; i <= n; i++) {
// Կ͔ॏ͍ॲཧ
// ॲཧ݁ՌΛϝΠϯεϨουʹ͢
const el = document.createElement('div');
el.textContent = result;
document.body.appendChild(el);
}
HTML (ϝΠϯεϨου) :
Worker༻ϑΝΠϧ :
Slide 34
Slide 34 text
import {upgradeElement} from ‘/path/to/index.mjs’;
upgradeElement(document.getElementById(‘upgrade-me'), ‘/path/to/worker.mjs’);
WorkerDOM͍ํ
1. WorkerଆͰ࣮ߦ͢ΔϑΝΠϧΛࢦఆ
2. worker-domͷindex.mjs͔ΒupgradeElementؔΛimport
3. 1ͷDOMͱworker-domͷworker.mjsΛҾʹઃఆ࣮͠ߦ
Slide 35
Slide 35 text
WorkerDOMͰԿ͕Ͱ͖Δͷ͔
• ͯ͢ͷॲཧΛWorkerଆʹҕৡ͢Δ͜ͱ͕Ͱ͖Δ͔
• AMPͰҙͷJavaScriptΛ࣮ߦͰ͖Δ͔
ɾamp-script෦ͰWorkerDOMΛ͍ͬͯΔ
• ReactVueͳͲWorkerͰ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ
ɾampproject/worker-domʹpreactΛಈ͔͢σϞ͕͋Δ
ɾWorkerDOM + React ࢼͯ͠Έͨ
Slide 36
Slide 36 text
Hello, World!
; }; ReactDOM.render(, document.getElementById('root')); HTML (ϝΠϯεϨου) : Worker༻ϑΝΠϧ :Slide 37
Slide 37 text
Hello, World!
; }; ReactDOM.render(, document.getElementById('root')); HTML (ϝΠϯεϨου) : Worker༻ϑΝΠϧ : Workerଆ͔ΒΞΫηε͍ͨ͠DOM upgradeElementͰࢦఆ͢ΔDOMͷதʹॻ͘Slide 38
Slide 38 text
https://shisama.github.io/worker-dom-sample/react-app/
create-react-app
Slide 39
Slide 39 text
https://shisama.github.io/worker-dom-sample/react-app/
WorkerεϨουͰ࣮ߦ͞Ε͍ͯΔ͔֬ೝ
Slide 40
Slide 40 text
https://shisama.github.io/worker-dom-sample/react-app/
WorkerεϨουͰ࣮ߦ͞Ε͍ͯΔ͔֬ೝ
Slide 41
Slide 41 text
preact demo@ampproject/worker-dom
https://github.com/ampproject/worker-dom/tree/master/demo/preact-dbmon
Slide 42
Slide 42 text
·ͱΊ
• ϝΠϯεϨουͰϔϏʔͳॲཧΛ͍ͯ͠ͳ͍͔֬ೝ͠Α͏
• WebWorkerͰϔϏʔͳॲཧΛϝΠϯεϨου͔Βಀ͕ͦ͏
• WorkerDOMΛ͏ͱWebWorkerͰDOMૢ࡞͕ՄೳʹͳΔ
• ReactͳͲWorkerͰ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ
Slide 43
Slide 43 text
ࢀߟ
• Σϒϒϥβͷ 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)
Slide 44
Slide 44 text
Thanks.