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
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
Search
久保田光則
July 24, 2017
Programming
0
3.5k
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
久保田光則
July 24, 2017
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
anatoo
1
680
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
10k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.7k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.7k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
6.8k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
20k
Other Decks in Programming
See All in Programming
【Go言語】ジェネリクス
tomo1227
0
170
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
Introduction to GitOps
hwchiu
0
110
Temporalを取り巻く仕様を整理する
sajikix
0
110
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
【Go言語】golangci-lintの使い方
tomo1227
0
270
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Designing Experiences People Love
moore
136
23k
How to name files
jennybc
67
96k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Become a Pro
speakerdeck
PRO
15
4.8k
Statistics for Hackers
jakevdp
792
220k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Six Lessons from altMBA
skipperchong
24
3.2k
Designing the Hi-DPI Web
ddemaree
276
34k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Rails Girls Zürich Keynote
gr2m
93
13k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Transcript
requestIdleCallback() ʹΑΔڠௐతόοΫάϥϯυ ॲཧͷ࣮ݱ "TQFDUJWF--$ٱอాޫଇ!BOBUPP
ٱอాޫଇ "TQFDUJWF--$ද !BOBUPP HJUIVCDPNBOBUPP ࣗݾհ
IUUQSFMBZIVCJP ࣾͰʮۀ͕উखʹճΔΈʯɺ࡞Ε·͢
ධൃചதʂ
ࠓճͷ requestIdleCallback()
SFRVFTU*EMF$BMMCBDL ͱ +BWB4DSJQUͷ࠷ۙग़͖ͯͨ"1* ϒϥβ͕Ջͳ࣌ʹ͍ͨ͠ॲཧ ͷίʔϧόοΫΛొ͢Δ
+BWB4DSJQUͷඇಉظॲཧ TFU5JNFPVU TFU*OUFSWBM SFRVFTU"OJNBUJPO'SBNF TFU*NNFEJBUF
ͳΜͰ͞Βʹ·ͨඇಉظॲཧ͕૿͑Δ
// Idleঢ়ଶͷ࣌ʹॲཧΛߦ͏ requestIdleCallback(function(deadline) { doSomething(); });
// ͍ͬͯΔ͕࣌ؒ͋ΕॲཧΛߦ͏ requestIdleCallback(function(deadline) { while (deadline.timeRemaining() > 0) { doSomething();
} });
requestIdleCallback(function (deadline) { while (deadline.timeRemaining() > 0) { doSomething(); }
// ·ͩΓ͍ͨλεΫ͕͍ͬͯΔ߹ requestIdleCallback(callback); });
;ʔΜ
എܠ
6*εϨουͷॲཧ 6*εϨου্Ͱ+BWB4DSJQU࣮ߦ͞ΕΔ +BWB4DSJQUҎ֎ʹඞཁͳλεΫ͕࣮ߦ͞ΕΔ Layout Paint Composite Layers Idle
Style Frame Scripting Կ͍ͬͯͳ͍ঢ়ଶ
4DSJQUJOH͕Ҿ͘ͱ ଞͷॲཧ͕ΕΔɻը໘͕Ԡ͠ͳ͘ͳΔ όοΫάϥϯυॲཧ͕Ͱ͖ͳ͍ Scripting
ͦ͜Ͱొͨ͠8FC8PSLFS ผϓϩηεͰ+BWB4DSJQUΛ࣮ߦͰ͖Δ Scripting Background Task UIεϨου ϫʔΧʔεϨου Scripting
// ΣϒϖʔδଆͷJS <script> var worker = new Worker(‘task.js’); </script> //
task.js … // ϫʔΧʔεϨουͰॲཧ͢ΔίʔυΛॻ͘
// ΣϒϖʔδଆͷJS <script> var worker = new Worker(‘task.js’); worker.postMessage({msg: ‘hello’});
</script> // task.js self.addEventListener(‘message’, function(e) { // e.data.msg === ‘hello’ });
// ΣϒϖʔδଆͷJS <script> var worker = new Worker(‘task.js’); worker.addEventListener(‘message’, callback);
worker.postMessage({msg: ‘hello’}); </script> // task.js self.addEventListener(‘message’, function(e) { self.postMessage({msg: e.data.msg}); });
࣌ؒͷ͔͔ΔόοΫάϥϯυλεΫ͕ແࣄ ॲཧͰ͖ΔΑ͏ʹͳͬͨ Scripting Background Task UIεϨου ϫʔΧʔεϨου Scripting postMessage()
postMessage()
ΊͰͨ͠ΊͰͨ͠ ☺
8FC8PSLFS͍ͮΒ͍ શʹίϯςΩετ͕ผ σʔλͷड͚͠ίϐʔ͢Δඞཁ͋Γ 5SBOTGFSBCMFΛ࣋ͭͷΈ͕ࢀর͠Ͱ ͖Δ
ίϯςΩετ͕શʹผ XJOEPXΦϒδΣΫτ͕ແ͍ %0.ཁૉͷΛಡΈࠐΜͩΓૢ࡞ ͨ͠ΓͰ͖ͳ͍ σʔλͷҾ͖͠ʹ͋Γ
QPTU.FTTBHF ͷบ σʔλશͯίϐʔ͞ΕΔ େ͖ͳྻΛ͢ͱΦʔόʔϔουʹ 5SBOTGFSBCMFͳΦϒδΣΫτͷΈࢀর͠Մೳ "SSBSZ#V⒎FS0⒎TDSFFO$BOWBTͳͲʹݶఆ
%0.ཁૉͳͲͤͳ͍ΦϒδΣΫτ͕͋Δ
ΤϯτϦϙΠϯτ͕૿͑Δ ϫʔΧʔ༻ʹKTϑΝΠϧΛผʹ࡞Δ ඞཁ͕͋Δɻ ΠϯϥΠϯϫʔΧʔͱ͍͏ςΫχο ΫͰΠϯϥΠϯԽҰԠͰ͖Δ͕ͦ Μͳʹ͍͍͢Θ͚Ͱͳ͍
// ΠϯϥΠϯϫʔΧʔͷྫ var bb = new BlobBuilder(); bb.append("onmessage = function(e)
{ postMessage('msg from worker'); }"); var blobURL = window.URL.createObjectURL(bb.getBlob()); var worker = new Worker(blobURL);
ϝΠϯεϨουͱಡΈࠐΜͩίʔ υͷڞ༗͕Ͱ͖ͳ͍ ίϯςΩετ͕ผͳͷͰɺϝΠϯεϨο υͰಡΈࠐΜͩίʔυΛڞ༗Ͱ͖ͳ͍ɻ ϫʔΧʔͷ+4ϑΝΠϧʹόϯυϧ͢͠ ͔ɺJNQPSU4DSJQUͰಡΈࠐΉඞཁ͕͋Δ
SFRVFTU*EMF$BMMCBDLʹΛ͢
SFRVFTU*EMF$BMMCBDL ͷλΠϛ ϯά *EMFঢ়ଶͷ࣌ʹݺͼग़͞ΕΔ ΠϯλϥΫγϣϯඳըΛअຐ͢Δ͜ͱ͕ͳ͍ Layout Paint Composite
Layers Idle Style Frame Scripting Կ͍ͬͯͳ͍ঢ়ଶ
SFRVFTU*EFM$BMMCBDLʹΛ͢ 8FC8PSLFSͷΦϧλφςΟϒͱͯ͑͠Δ ϒϥβ͕Ջͳͱ͖ʹॲཧͯ͘͠ΕΔ 6*εϨουͰ࣮ߦ͢ΔͷͰ͍ͮΒ͘ͳ͍ ίʔυͷڞ༗ͷड͚͠ͷղܾ
%0.ૢ࡞Մೳ όοΫάϥϯυॲཧʹ࠷ద
ҙɺܽ ϚΠΫϩλεΫʹׂ͢Δඞཁ͋Γ %0.ૢ࡞SFRVFTU"OJNBUJPO'SBNF Λ௨ͯ͡ߦ͏
function bgtask(deadline) { while (deadline.timeRemaining() > 0) { // 10-20msඵఔҎԼʹ͢Δ
doMicroTask(); } requestIdelCallback(bgtask); }); requestIdleCallback(bgtask);
requestIdleCallback(function(deadline) { while (deadline.timeRemaining() > 0) { var result =
doSomething(); // ಉظతʹDOMૢ࡞͠ͳ͍Α͏ʹ͢Δ requestAnimationFrame(function() { document.body.querySelector(‘#hoge’) = result; }); } });
͓·͚
(FOFSBUPSͱΈ߹ΘͤΔ ϚΠΫϩλεΫʹׂ͢ΔͷΊΜͲ͍͘͞ ਓʹ࿕ใ (FOFSBUPSΛ͏ͱόοΫάϥϯυॲཧ ΛϚΠΫϩλεΫʹׂ͘͢͠ͳΓ·͢
function runInIdle(it) { requestIdleCallback(function(deadline) { var val = it.next(); while
(!val.done) { if (deadline.timeRemaining() <= 0) { runInIdle(it); return; } val = it.next(); } }); }
// όοΫάϥϯυͰfizzbuzz͢Δྫ function* fizzbuzz() { for (var i = 0;;i++)
{ yield; // ←͜͜ͰॲཧΛׂ if (i % 15 = 0) output(‘FizzBuzz’); else if (i % 3 == 0) output(‘Fizz’); else if (i % 5 == 0) output(‘Buzz’); else output(i); } }; runInIdle(fizzbuzz());
·ͱΊ +4ͷ࣮ߦγϯάϧεϨουͳͷͰόοΫά ϥϯυॲཧ͕Ͱ͖ͳ͍ ผεϨουͰॲཧ͢Δ8FC8PSLFS͍ͮ Β͞ͱ͍͏͋Γ requetIdleCallback()͕8FC8PSLFSͷ ΦϧλφςΟϒͱͯ͑͠Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠