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
800
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.9k
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
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
690
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
TypeScriptでDXを上げろ! Hono編
yusukebe
3
860
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.2k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
250
What's new in AppKit on macOS 26
1024jp
0
170
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
700
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
220
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Speed Design
sergeychernyshev
32
1k
Site-Speed That Sticks
csswizardry
10
720
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Gamification - CAS2011
davidbonilla
81
5.4k
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ͷ ΦϧλφςΟϒͱͯ͑͠Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠