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.7k
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
7.9k
Evolution of Emoji 🖼🔤✨
kosamari
3
840
Web Platform ... What is it ? (Webプラットフォームのつくり方)
kosamari
2
980
How to build a FIRE
kosamari
2
210
Other Decks in Technology
See All in Technology
Classmethod Odyssey 登壇資料
yamahiro
0
390
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
AOAI Dev Day - Opening Session
yoshidashingo
2
470
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
How to Think Like a Performance Engineer
csswizardry
4
590
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
Design by the Numbers
sachag
277
18k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Debugging Ruby Performance
tmm1
71
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Designing the Hi-DPI Web
ddemaree
276
34k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Designing Experiences People Love
moore
136
23k
Faster Mobile Websites
deanohume
303
30k
Navigating Team Friction
lara
181
13k
The Mythical Team-Month
searls
217
43k
The Cult of Friendly URLs
andyhume
75
5.9k
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