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

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

F7dd7b43a0cc6c063f7d98ba23a1d359?s=128

久保田光則

July 24, 2017
Tweet

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