Slide 1
Slide 1 text
requestIdleCallback()
ʹΑΔڠௐతόοΫάϥϯυ
ॲཧͷ࣮ݱ
"TQFDUJWF--$ٱอాޫଇ!BOBUPP
Slide 2
Slide 2 text
ٱอాޫଇ
"TQFDUJWF--$ද
!BOBUPP
HJUIVCDPNBOBUPP
ࣗݾհ
Slide 3
Slide 3 text
IUUQSFMBZIVCJP
ࣾͰʮۀ͕উखʹճΔΈʯɺ࡞Ε·͢
Slide 4
Slide 4 text
ධൃചதʂ
Slide 5
Slide 5 text
ࠓճͷ
requestIdleCallback()
Slide 6
Slide 6 text
SFRVFTU*EMF$BMMCBDL
ͱ
+BWB4DSJQUͷ࠷ۙग़͖ͯͨ"1*
ϒϥβ͕Ջͳ࣌ʹ͍ͨ͠ॲཧ
ͷίʔϧόοΫΛొ͢Δ
Slide 7
Slide 7 text
+BWB4DSJQUͷඇಉظॲཧ
TFU5JNFPVU
TFU*OUFSWBM
SFRVFTU"OJNBUJPO'SBNF
TFU*NNFEJBUF
ͳΜͰ͞Βʹ·ͨඇಉظॲཧ͕૿͑Δ
Slide 8
Slide 8 text
// Idleঢ়ଶͷ࣌ʹॲཧΛߦ͏
requestIdleCallback(function(deadline) {
doSomething();
});
Slide 9
Slide 9 text
// ͍ͬͯΔ͕࣌ؒ͋ΕॲཧΛߦ͏
requestIdleCallback(function(deadline) {
while (deadline.timeRemaining() > 0) {
doSomething();
}
});
Slide 10
Slide 10 text
requestIdleCallback(function (deadline) {
while (deadline.timeRemaining() > 0) {
doSomething();
}
// ·ͩΓ͍ͨλεΫ͕͍ͬͯΔ߹
requestIdleCallback(callback);
});
Slide 11
Slide 11 text
;ʔΜ
Slide 12
Slide 12 text
എܠ
Slide 13
Slide 13 text
6*εϨουͷॲཧ
6*εϨου্Ͱ+BWB4DSJQU࣮ߦ͞ΕΔ
+BWB4DSJQUҎ֎ʹඞཁͳλεΫ͕࣮ߦ͞ΕΔ
Layout Paint
Composite
Layers
Idle
Style
Frame
Scripting
Կ͍ͬͯͳ͍ঢ়ଶ
Slide 14
Slide 14 text
4DSJQUJOH͕Ҿ͘ͱ
ଞͷॲཧ͕ΕΔɻը໘͕Ԡ͠ͳ͘ͳΔ
όοΫάϥϯυॲཧ͕Ͱ͖ͳ͍
Scripting
Slide 15
Slide 15 text
ͦ͜Ͱొͨ͠8FC8PSLFS
ผϓϩηεͰ+BWB4DSJQUΛ࣮ߦͰ͖Δ
Scripting
Background Task
UIεϨου
ϫʔΧʔεϨου
Scripting
Slide 16
Slide 16 text
// ΣϒϖʔδଆͷJS
var worker = new Worker(‘task.js’);
// task.js
… // ϫʔΧʔεϨουͰॲཧ͢ΔίʔυΛॻ͘
Slide 17
Slide 17 text
// ΣϒϖʔδଆͷJS
var worker = new Worker(‘task.js’);
worker.postMessage({msg: ‘hello’});
// task.js
self.addEventListener(‘message’, function(e) {
// e.data.msg === ‘hello’
});
Slide 18
Slide 18 text
// ΣϒϖʔδଆͷJS
var worker = new Worker(‘task.js’);
worker.addEventListener(‘message’, callback);
worker.postMessage({msg: ‘hello’});
// task.js
self.addEventListener(‘message’, function(e)
{
self.postMessage({msg: e.data.msg});
});
Slide 19
Slide 19 text
࣌ؒͷ͔͔ΔόοΫάϥϯυλεΫ͕ແࣄ
ॲཧͰ͖ΔΑ͏ʹͳͬͨ
Scripting
Background Task
UIεϨου
ϫʔΧʔεϨου
Scripting
postMessage() postMessage()
Slide 20
Slide 20 text
ΊͰͨ͠ΊͰͨ͠ ☺
Slide 21
Slide 21 text
8FC8PSLFS͍ͮΒ͍
શʹίϯςΩετ͕ผ
σʔλͷड͚͠ίϐʔ͢Δඞཁ͋Γ
5SBOTGFSBCMFΛ࣋ͭͷΈ͕ࢀর͠Ͱ
͖Δ
Slide 22
Slide 22 text
ίϯςΩετ͕શʹผ
XJOEPXΦϒδΣΫτ͕ແ͍
%0.ཁૉͷΛಡΈࠐΜͩΓૢ࡞
ͨ͠ΓͰ͖ͳ͍
σʔλͷҾ͖͠ʹ͋Γ
Slide 23
Slide 23 text
QPTU.FTTBHF
ͷบ
σʔλશͯίϐʔ͞ΕΔ
େ͖ͳྻΛ͢ͱΦʔόʔϔουʹ
5SBOTGFSBCMFͳΦϒδΣΫτͷΈࢀর͠Մೳ
"SSBSZ#V⒎FS0⒎TDSFFO$BOWBTͳͲʹݶఆ
%0.ཁૉͳͲͤͳ͍ΦϒδΣΫτ͕͋Δ
Slide 24
Slide 24 text
ΤϯτϦϙΠϯτ͕૿͑Δ
ϫʔΧʔ༻ʹKTϑΝΠϧΛผʹ࡞Δ
ඞཁ͕͋Δɻ
ΠϯϥΠϯϫʔΧʔͱ͍͏ςΫχο
ΫͰΠϯϥΠϯԽҰԠͰ͖Δ͕ͦ
Μͳʹ͍͍͢Θ͚Ͱͳ͍
Slide 25
Slide 25 text
// ΠϯϥΠϯϫʔΧʔͷྫ
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);
Slide 26
Slide 26 text
ϝΠϯεϨουͱಡΈࠐΜͩίʔ
υͷڞ༗͕Ͱ͖ͳ͍
ίϯςΩετ͕ผͳͷͰɺϝΠϯεϨο
υͰಡΈࠐΜͩίʔυΛڞ༗Ͱ͖ͳ͍ɻ
ϫʔΧʔͷ+4ϑΝΠϧʹόϯυϧ͢͠
͔ɺJNQPSU4DSJQUͰಡΈࠐΉඞཁ͕͋Δ
Slide 27
Slide 27 text
SFRVFTU*EMF$BMMCBDLʹΛ͢
Slide 28
Slide 28 text
SFRVFTU*EMF$BMMCBDL
ͷλΠϛ
ϯά
*EMFঢ়ଶͷ࣌ʹݺͼग़͞ΕΔ
ΠϯλϥΫγϣϯඳըΛअຐ͢Δ͜ͱ͕ͳ͍
Layout Paint
Composite
Layers
Idle
Style
Frame
Scripting
Կ͍ͬͯͳ͍ঢ়ଶ
Slide 29
Slide 29 text
SFRVFTU*EFM$BMMCBDLʹΛ͢
8FC8PSLFSͷΦϧλφςΟϒͱͯ͑͠Δ
ϒϥβ͕Ջͳͱ͖ʹॲཧͯ͘͠ΕΔ
6*εϨουͰ࣮ߦ͢ΔͷͰ͍ͮΒ͘ͳ͍
ίʔυͷڞ༗ͷड͚͠ͷղܾ
%0.ૢ࡞Մೳ
όοΫάϥϯυॲཧʹ࠷ద
Slide 30
Slide 30 text
ҙɺܽ
ϚΠΫϩλεΫʹׂ͢Δඞཁ͋Γ
%0.ૢ࡞SFRVFTU"OJNBUJPO'SBNF
Λ௨ͯ͡ߦ͏
Slide 31
Slide 31 text
function bgtask(deadline) {
while (deadline.timeRemaining() > 0) {
// 10-20msඵఔҎԼʹ͢Δ
doMicroTask();
}
requestIdelCallback(bgtask);
});
requestIdleCallback(bgtask);
Slide 32
Slide 32 text
requestIdleCallback(function(deadline) {
while (deadline.timeRemaining() > 0) {
var result = doSomething();
// ಉظతʹDOMૢ࡞͠ͳ͍Α͏ʹ͢Δ
requestAnimationFrame(function() {
document.body.querySelector(‘#hoge’) =
result;
});
}
});
Slide 33
Slide 33 text
͓·͚
Slide 34
Slide 34 text
(FOFSBUPSͱΈ߹ΘͤΔ
ϚΠΫϩλεΫʹׂ͢ΔͷΊΜͲ͍͘͞
ਓʹ࿕ใ
(FOFSBUPSΛ͏ͱόοΫάϥϯυॲཧ
ΛϚΠΫϩλεΫʹׂ͘͢͠ͳΓ·͢
Slide 35
Slide 35 text
function runInIdle(it) {
requestIdleCallback(function(deadline) {
var val = it.next();
while (!val.done) {
if (deadline.timeRemaining() <= 0) {
runInIdle(it);
return;
}
val = it.next();
}
});
}
Slide 36
Slide 36 text
// όοΫάϥϯυͰ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());
Slide 37
Slide 37 text
·ͱΊ
+4ͷ࣮ߦγϯάϧεϨουͳͷͰόοΫά
ϥϯυॲཧ͕Ͱ͖ͳ͍
ผεϨουͰॲཧ͢Δ8FC8PSLFS͍ͮ
Β͞ͱ͍͏͋Γ
requetIdleCallback()͕8FC8PSLFSͷ
ΦϧλφςΟϒͱͯ͑͠Δ
Slide 38
Slide 38 text
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠