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.6k
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
久保田光則
July 24, 2017
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
anatoo
1
720
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.8k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.7k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
7k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
20k
Other Decks in Programming
See All in Programming
受け取る人から提供する人になるということ
little_rubyist
0
230
C++でシェーダを書く
fadis
6
4.1k
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
CSC509 Lecture 09
javiergs
PRO
0
140
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.1k
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
A designer walks into a library…
pauljervisheath
204
24k
Designing for humans not robots
tammielis
250
25k
The Pragmatic Product Professional
lauravandoore
31
6.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Thoughts on Productivity
jonyablonski
67
4.3k
A Philosophy of Restraint
colly
203
16k
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ͷ ΦϧλφςΟϒͱͯ͑͠Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠