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
Modern Linux
oracle4engineer
PRO
0
150
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
270
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
270
データ分析エージェント Socrates の育て方
na0
5
770
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
170
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
980
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
570
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
It's Worth the Effort
3n
187
28k
Building Adaptive Systems
keathley
43
2.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Gamification - CAS2011
davidbonilla
81
5.4k
KATA
mclloyd
32
14k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Code Reviewing Like a Champion
maltzj
525
40k
The Pragmatic Product Professional
lauravandoore
36
6.9k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
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