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()による協調的バックグラウンド処理の実現 / requ...
Search
久保田光則
July 24, 2017
Programming
0
3.9k
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
久保田光則
July 24, 2017
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
anatoo
1
810
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
10k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.8k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
7.2k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
20k
Other Decks in Programming
See All in Programming
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
270
明日から始めるリファクタリング
ryounasso
0
140
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
5k
XP, Testing and ninja testing ZOZ5
m_seki
3
650
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
CSC509 Lecture 05
javiergs
PRO
0
300
Software Architecture
hschwentner
6
2.3k
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
1k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
770
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.7k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
10k
We Have a Design System, Now What?
morganepeng
53
7.8k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Become a Pro
speakerdeck
PRO
29
5.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Gamification - CAS2011
davidbonilla
81
5.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Six Lessons from altMBA
skipperchong
29
4k
What's in a price? How to price your products and services
michaelherold
246
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Automating Front-end Workflow
addyosmani
1371
200k
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ͷ ΦϧλφςΟϒͱͯ͑͠Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠