Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Off the main thread with workers !
Search
Mariko Kosaka
April 27, 2018
Technology
5
1.9k
Off the main thread with workers !
This is a presentation slide I presented at Node学園 in Tokyo on April 27th, 2018
Mariko Kosaka
April 27, 2018
Tweet
Share
More Decks by Mariko Kosaka
See All by Mariko Kosaka
Web標準でつくるガラケーサイト
kosamari
17
8.3k
Evolution of Emoji 🖼🔤✨
kosamari
3
960
Web Platform ... What is it ? (Webプラットフォームのつくり方)
kosamari
2
1.1k
How to build a FIRE
kosamari
2
230
Other Decks in Technology
See All in Technology
MCPサーバーを活用したAWSコスト管理
arie0703
0
130
事業特性から逆算したインフラ設計
upsider_tech
0
240
モノレポにおけるエラー管理 ~Runbook自動生成とチームメンションの最適化
biwashi
0
370
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
7
1.3k
Amazon GuardDuty での脅威検出:脅威検出の実例から学ぶ
kintotechdev
0
130
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
0
310
o11yツールを乗り換えた話
tak0x00
2
1.7k
サイボウズフロントエンドの横断活動から考える AI時代にできること
mugi_uno
3
1.1k
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
520
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
160
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
29
14k
会社にデータエンジニアがいることでできるようになること
10xinc
4
380
Featured
See All Featured
Scaling GitHub
holman
462
140k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Optimizing for Happiness
mojombo
379
70k
4 Signs Your Business is Dying
shpigford
184
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
Off the main thread with workers! NodeֶԂ30࣌ݶ @kosamari
@kosamari
ECMAScriptͷۙگใࠂ
ES2018 ݻ·Γ·ͨ͠ ʢਖ਼ࣜʹ5݄ʹυϥϑτ֬ఆͯ͠6݄ʹঝೝ༧ఆʣ
Regex ڧԽ
Ұ൪خ͍͠ͷ Named Capture Groups
const pattern =/(\d{4})-(\d{2})-(\d{2})/u; const result = pattern.exec(‘2018-03-06'); // ! result[0]
=== '2018-03-06' // ! result[1] === '2018' // ! result[2] === '03' // ! result[3] === '06'
const pattern =/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u; const result = pattern.exec('2018-03-06'); // ! result.groups.year
=== '2018' // ! result.groups.month === '03' // ! result.groups.day === '06'
ʢେ͞Μͱωλ͕ඃͬͨͷͰ͏Ұͭʣ Lookbehind assertions
const pattern =/(?<=\$)\d+/u; const result = pattern.exec('$42'); // ! result[0]
=== '42'
Object Rest ͱ Sprad ඪ४ʹͳΔΑ
// Rest properties for object destructuring assignment: const person =
{ firstName:’Sebastian', lastName:’Markbåge', country:'USA', state:’CA'}; const{ firstName, lastName, ...rest } = person; console.log(firstName); // Sebastian console.log(lastName); // Markbåge console.log(rest); // { country: 'USA', state: 'CA' }
// Spread properties for object literals: const personCopy ={ firstName,
lastName, ...rest }; console.log(personCopy); // { firstName: 'Sebastian', // lastName: 'Markbåge', // country: 'USA', // state: 'CA' }
Finally, Promise.prototype.finally
fetch(url) .then((response)=> response.text()) .then((text)=>{ element.textContent = text; }) .catch((error)=>{ element.textContent
= error.message; })
fetch(url) .then((response)=> response.text()) .then((text)=>{ element.textContent = text; }) .catch((error)=>{ element.textContent
= error.message; }) .finally(()=>{ hideLoadingSpinner(); });
ChromeͰ ES2018͢Ͱʹશ෦͑·͢ʂ
https://slidr.io/mathiasbynens/what-s-new-in-es2018
Smoosh ࣄ݅
None
Ұिؒ͘Β͍ࣄʹͳΒΜ͔ͬͨ
Break the Web or NOT break the Web
ʮͳΜͱͳ͘ഉଞతʯ όογϯά
https://github.com/tc39/tc39-web-draft
Off the main thread with workers! NodeֶԂ30࣌ݶ @kosamari
݁શ͘ग़͍ͯ·ͤΜ ͜Μͳಈ͖͕͋ΔΑ͍ͬͯ͏ΞοϓσʔτͰ͢
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ TL;DR
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜Worker͍ͬͯ͏ศརͳͷ͕…ʢΑͬ͠ΌʔΔ͔ʔʣ TL;DR
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜Worker͍ͬͯ͏ศརͳͷ͕…ʢΑͬ͠ΌʔΔ͔ʔʣ ͋ΕɺWorkerͷ͍͘͢͝ʹ͘͘ͳ͍ʁ TL;DR
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜Worker͍ͬͯ͏ศརͳͷ͕…ʢΑͬ͠ΌʔΔ͔ʔʣ ͋ΕɺWorkerͷ͍͘͢͝ʹ͘͘ͳ͍ʁ ͍͘͢͢ΔʹͲ͏͢Εྑ͍ΜͩΖ͏…ʢ͝ҙݟืूதʣ TL;DR
ͦͦWorkerͱ
Data DOMͰग़དྷͯΔ ϒϥβ ϒϥβ͔Βଧ্ͪ͛ΒΕͨ WebWorker
const worker = new Worker('worker.js');
const worker = new Worker('worker.js'); worker.postMessage(data); self.onmessage = (message) =>
{ // do something
const worker = new Worker('worker.js'); worker.postMessage(data); self.onmessage = (message) =>
{ // do something self.postMessage(data) }
const worker = new Worker('worker.js'); worker.postMessage(data); worker.onmessage = (message) =>
{ // do something on main thread }; self.onmessage = (message) => { // do something high cost self.postMessage(data) }
ͳͥϚϧνεϨου͕ඞཁʁ ͦͦϒϥβͰඇಉظॲཧ͡Όͳ͍ͷʁ Promise͢ΔΜ͡Όͳ͍ͷʁ
࠷ۙͷΣϒΞϓϦΈΜͳ JSONσʔλΛΰχϣΰχϣ͔ͯ͠ΒDOMʹө
✔ Network
✔ Network ✔ DOM
✔ Network ✔ DOM ✗ data processing
✔ Network ✔ DOM ✗ data processing ͜Ε͕ංେԽͯ͠Δͷ͕
Does anyone like programming with workers?
ݴΘΕͯΈͨΒ…͜Εͷ͍͍ͮ͢͝Β͍ͳɻ (શʹετοΫϗϧϜީ܈ʹͳͬͯͨ)
WebWorkerπϥΠɹͦͷ̍ɿ WebWorkerΛ͏·͘͏ʹ εϨουϓʔϧతʹ εέδϡʔϥʔΛࣗͰ࣮͠ͳ͍ͱ͍͚ͳ͍
A JavaScript Scheduler API by Justin (2લͷΞΠσΞ)
Parallel JSϓϩϙʔαϧࣦʢ.NETͷPLINQΈ͍ͨͳͷʣ
WebWorkerΛྑ͍ͨ͘͠ɹٞ̍ɿ C#ͱ͔RxKotlinΈ͍ͨʹ͏·࣮͘ʁ Erlangૣ͍Β͍͠…
WebWorkerπϥΠɹͦͷ̎ɿ postMessageͰσʔλΓऔΓ͢Δͷ͕େม
postMessage({…}) postMessage({…})
SharedArrayBuffer
https://webkit.org/blog/7846/concurrent-javascript-it-can-work/
Transferable Streams
importScripts('vp10decode.js', 'mp4encode.js'); const transcoder = new TransformStream({ transform(chunk, controller) {
const decoded = vp10decode(chunk); controller.enqueue(mp4encode(decoded)); } }); postMessage(transcoder, [transcoder]); const worker = new Worker('transcode.js'); worker.onmessage = event => { const transcoder = event.data; await fetch('bunny.vp10') .pipeThrough(transcoder) .pipeTo(videoSink); };
WebWorkerΛྑ͍ͨ͘͠ɹٞ̎ɿ postMessageͷAPIΛநԽ͍ͯ͘͢͠
https://github.com/GoogleChromeLabs/comlink
https://github.com/GoogleChromeLabs/clooney
WebWorkerΛྑ͍ͨ͘͠ɹٞ̏ɿ εϨʔυϓʔϧϞσϧͱϝϞϦγΣΞϞσϧ ૬ੑ͕ྑ͘ͳ͍
WebWorkerπϥΠɹͦͷ3ɿ ͦͦWebWorkerͬͯϑΝΠϧΛ ผ͚ͳ͖Ό͍͚ͳͯ͘ΊΜͲ͍͘͞
JavaScript Tagged Blocks
WebWorkerΛྑ͍ͨ͘͠ɹٞ̐ɿ εϨουϞσϧʁͦΕͱλεΫϞσϧʁ
εϨουΒͬͨθʂ ͣͬͱฦ͞ͳ͍ζϥʂ C++ ࣄऴΘͬͨͳΒ returnฦͯ͠Αʙ
ϚϧνεϨουͰͷΣϒΞϓϦ։ൃ ͲΜͳ;͏ʹϓϩάϥϜॻ͖͍ͨͰ͔͢ʁ
ݴޠ༷VMͷߏ͔Βม͑ΒΕΔͱͨ͠ Ͳ͏͍ͨ͠Ͱ͔͢ʁ
ͥͻ͝ҙݟ͍ͩ͘͞ɻ Thanks ! @kosamari