requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()

Transcript

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