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
41
16k
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
390
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
720
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
300
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.3k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
370
Gemini CLI のはじめ方
ttnyt8701
1
110
リッチエディターを安全に開発・運用するために
unachang113
1
310
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
4.7k
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
How to Ace a Technical Interview
jacobian
278
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing for Performance
lara
610
69k
Raft: Consensus for Rubyists
vanstee
140
7k
Six Lessons from altMBA
skipperchong
28
3.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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ͷ ΦϧλφςΟϒͱͯ͑͠Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠