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

Transcript

1. 1.

   requestIdleCallback() ʹΑΔڠௐతόοΫάϥ΢ϯυ ॲཧͷ࣮ݱ "TQFDUJWF
   --$
   ٱอాޫଇ
   !BOBUPP

2. 2.

   ٱอాޫଇ
   "TQFDUJWF
   --$୅ද
   
   
   
   
   
   !BOBUPP
   
   
   
   
   
   HJUIVCDPNBOBUPP ࣗݾ঺հ

3. 3.

   IUUQSFMBZIVCJP ࣾ಺Ͱʮۀ຿͕উखʹճΔ࢓૊Έʯɺ࡞Ε·͢

4. 4.

   ޷ධൃചதʂ

5. 5.

   ࠓճͷ࿩ requestIdleCallback()

6. 6.

   SFRVFTU*EMF$BMMCBDL ͱ͸  +BWB4DSJQUͷ࠷ۙग़͖ͯͨ"1*
    ϒϥ΢β͕Ջͳ࣌ʹ͍ͨ͠ॲཧ
 ͷίʔϧόοΫΛొ࿥͢Δ

7. 7.

   +BWB4DSJQUͷඇಉظॲཧ  TFU5JNFPVU
   
   TFU*OUFSWBM
    SFRVFTU"OJNBUJPO'SBNF
    TFU*NNFEJBUF

   
    ͳΜͰ͞Βʹ·ͨඇಉظॲཧ͕૿͑Δ
8. 8.

   // Idleঢ়ଶͷ࣌ʹॲཧΛߦ͏ requestIdleCallback(function(deadline) { doSomething(); });

9. 9.

   // ࢒͍ͬͯΔ͕࣌ؒ͋Ε͹ॲཧΛߦ͏ requestIdleCallback(function(deadline) { while (deadline.timeRemaining() > 0) { doSomething();

   } });
10. 10.

    requestIdleCallback(function (deadline) { while (deadline.timeRemaining() > 0) { doSomething(); }

    // ·ͩ΍Γ͍ͨλεΫ͕࢒͍ͬͯΔ৔߹ requestIdleCallback(callback); });
11. 11.

    ;ʔΜ

12. 12.

    എܠ

13. 13.

    6*εϨουͷॲཧ  6*εϨου্Ͱ+BWB4DSJQU͸࣮ߦ͞ΕΔ
     +BWB4DSJQUҎ֎ʹ΋ඞཁͳλεΫ͕࣮ߦ͞ΕΔ Layout Paint Composite Layers Idle

    Style Frame Scripting Կ΋΍͍ͬͯͳ͍ঢ়ଶ
14. 14.

    4DSJQUJOH͕௕Ҿ͘ͱ  ଞͷॲཧ͕஗ΕΔɻը໘͕൓Ԡ͠ͳ͘ͳΔ
     όοΫάϥ΢ϯυॲཧ͕Ͱ͖ͳ͍ Scripting

15. 15.

    ͦ͜Ͱొ৔ͨ͠8FC8PSLFS  ผϓϩηεͰ+BWB4DSJQUΛ࣮ߦͰ͖Δ Scripting Background Task UIεϨου ϫʔΧʔεϨου Scripting

16. 16.

    // ΢ΣϒϖʔδଆͷJS <script> var worker = new Worker(‘task.js’); </script> //

    task.js … // ϫʔΧʔεϨουͰॲཧ͢ΔίʔυΛॻ͘
17. 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. 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. 19.

     ࣌ؒͷ͔͔ΔόοΫάϥ΢ϯυλεΫ͕ແࣄ ॲཧͰ͖ΔΑ͏ʹͳͬͨ Scripting Background Task UIεϨου ϫʔΧʔεϨου Scripting postMessage()

    postMessage()
20. 20.

    ΊͰͨ͠ΊͰͨ͠ ☺

21. 21.

    8FC8PSLFS࢖͍ͮΒ͍໰୊  ׬શʹίϯςΩετ͕ผ
     σʔλͷड͚౉͠͸ίϐʔ͢Δඞཁ͋Γ
     5SBOTGFSBCMFΛ࣋ͭ஋ͷΈ͕ࢀর౉͠Ͱ ͖Δ

22. 22.

    ίϯςΩετ͕׬શʹผ  XJOEPXΦϒδΣΫτ͕ແ͍
     %0.ཁૉͷ஋ΛಡΈࠐΜͩΓૢ࡞ ͨ͠ΓͰ͖ͳ͍
     σʔλͷҾ͖౉͠ʹ೉͋Γ

23. 23.

    QPTU.FTTBHF ͷบ  σʔλ͸શͯίϐʔ͞ΕΔ
     େ͖ͳ഑ྻΛ౉͢ͱΦʔόʔϔουʹ
     5SBOTGFSBCMFͳΦϒδΣΫτͷΈࢀর౉͠Մೳ
     "SSBSZ#V⒎FS΍0⒎TDSFFO$BOWBTͳͲʹݶఆ
    

     %0.ཁૉͳͲ౉ͤͳ͍ΦϒδΣΫτ͕͋Δ
24. 24.

    ΤϯτϦϙΠϯτ͕૿͑Δ  ϫʔΧʔ༻ʹKTϑΝΠϧΛผʹ࡞Δ ඞཁ͕͋Δɻ
     ΠϯϥΠϯϫʔΧʔͱ͍͏ςΫχο ΫͰΠϯϥΠϯԽ΋ҰԠͰ͖Δ͕ͦ Μͳʹ࢖͍΍͍͢Θ͚Ͱ͸ͳ͍

25. 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. 26.

    ϝΠϯεϨουͱಡΈࠐΜͩίʔ υͷڞ༗͕Ͱ͖ͳ͍  ίϯςΩετ͕ผͳͷͰɺϝΠϯεϨο υͰಡΈࠐΜͩίʔυΛڞ༗Ͱ͖ͳ͍ɻ
     ϫʔΧʔͷ+4ϑΝΠϧʹόϯυϧ͠௚͢ ͔ɺJNQPSU4DSJQUͰಡΈࠐΉඞཁ͕͋Δ

27. 27.

    SFRVFTU*EMF$BMMCBDLʹ࿩Λ໭͢

28. 28.

    SFRVFTU*EMF$BMMCBDL ͷλΠϛ ϯά  *EMFঢ়ଶͷ࣌ʹݺͼग़͞ΕΔ
     ΠϯλϥΫγϣϯ΍ඳըΛअຐ͢Δ͜ͱ͕ͳ͍ Layout Paint Composite

    Layers Idle Style Frame Scripting Կ΋΍͍ͬͯͳ͍ঢ়ଶ
29. 29.

    SFRVFTU*EFM$BMMCBDLʹ࿩Λ໭͢  8FC8PSLFSͷΦϧλφςΟϒͱͯ͠΋࢖͑Δ
     ϒϥ΢β͕Ջͳͱ͖ʹॲཧͯ͘͠ΕΔ
     6*εϨουͰ࣮ߦ͢ΔͷͰ࢖͍ͮΒ͘ͳ͍
     ίʔυͷڞ༗΍஋ͷड͚౉͠ͷ໰୊΋ղܾ
    

    %0.ૢ࡞΋Մೳ
     όοΫάϥ΢ϯυॲཧʹ࠷ద
30. 30.

    ஫ҙ఺ɺܽ఺  ϚΠΫϩλεΫʹ෼ׂ͢Δඞཁ͋Γ
     %0.ૢ࡞͸SFRVFTU"OJNBUJPO'SBNF Λ௨ͯ͡ߦ͏

31. 31.

    function bgtask(deadline) { while (deadline.timeRemaining() > 0) { // 10-20msඵఔ౓ҎԼʹ͢Δ

    doMicroTask(); } requestIdelCallback(bgtask); }); requestIdleCallback(bgtask);
32. 32.

    requestIdleCallback(function(deadline) { while (deadline.timeRemaining() > 0) { var result =

    doSomething(); // ಉظతʹDOMૢ࡞͸͠ͳ͍Α͏ʹ͢Δ requestAnimationFrame(function() { document.body.querySelector(‘#hoge’) = result; }); } });
33. 33.

    ͓·͚

34. 34.

    (FOFSBUPSͱ૊Έ߹ΘͤΔ  ϚΠΫϩλεΫʹ෼ׂ͢ΔͷΊΜͲ͍͘͞ ਓʹ࿕ใ
     (FOFSBUPSΛ࢖͏ͱόοΫάϥ΢ϯυॲཧ ΛϚΠΫϩλεΫʹ෼ׂ͠΍͘͢ͳΓ·͢

35. 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. 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. 37.

    ·ͱΊ  +4ͷ࣮ߦ͸γϯάϧεϨουͳͷͰόοΫά ϥ΢ϯυॲཧ͕Ͱ͖ͳ͍
     ผεϨουͰॲཧ͢Δ8FC8PSLFS͸࢖͍ͮ Β͞ͱ͍͏໰୊͋Γ
     requetIdleCallback()͕8FC8PSLFSͷ ΦϧλφςΟϒͱͯ͠࢖͑Δ

38. 38.

    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠