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

久保田光則

July 24, 2017

Tweet Share

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠