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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. ޷ධൃചதʂ
   

   View Slide

5. ࠓճͷ࿩
   requestIdleCallback()
   

   View Slide

6. SFRVFTU*EMF$BMMCBDL
   ͱ͸
   +BWB4DSJQUͷ࠷ۙग़͖ͯͨ"1*
   ϒϥ΢β͕Ջͳ࣌ʹ͍ͨ͠ॲཧ

   ͷίʔϧόοΫΛొ࿥͢Δ
   

   View Slide

7. +BWB4DSJQUͷඇಉظॲཧ
   TFU5JNFPVU
   TFU*OUFSWBM
   
   SFRVFTU"OJNBUJPO'SBNF
   
   TFU*NNFEJBUF
   
   ͳΜͰ͞Βʹ·ͨඇಉظॲཧ͕૿͑Δ
   

   View Slide

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

   View Slide

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

   View Slide

10. requestIdleCallback(function (deadline) {
    while (deadline.timeRemaining() > 0) {
    doSomething();
    }
    // ·ͩ΍Γ͍ͨλεΫ͕࢒͍ͬͯΔ৔߹
    requestIdleCallback(callback);
    });
    

    View Slide

11. ;ʔΜ
    

    View Slide

12. എܠ
    

    View Slide

13. 6*εϨουͷॲཧ
    6*εϨου্Ͱ+BWB4DSJQU͸࣮ߦ͞ΕΔ
    +BWB4DSJQUҎ֎ʹ΋ඞཁͳλεΫ͕࣮ߦ͞ΕΔ
    Layout Paint
    Composite
    
    Layers
    Idle
    Style
    Frame
    Scripting
    Կ΋΍͍ͬͯͳ͍ঢ়ଶ
    

    View Slide

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

    View Slide

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

    View Slide

16. // ΢ΣϒϖʔδଆͷJS
    <br/>var worker = new Worker(‘task.js’);<br/>
    // task.js
    … // ϫʔΧʔεϨουͰॲཧ͢ΔίʔυΛॻ͘
    

    View Slide

17. // ΢ΣϒϖʔδଆͷJS
    <br/>var worker = new Worker(‘task.js’);<br/>worker.postMessage({msg: ‘hello’});<br/>
    // task.js
    self.addEventListener(‘message’, function(e) {
    // e.data.msg === ‘hello’
    });
    

    View Slide

18. // ΢ΣϒϖʔδଆͷJS
    <br/>var worker = new Worker(‘task.js’);<br/>worker.addEventListener(‘message’, callback);<br/>worker.postMessage({msg: ‘hello’});<br/>
    // task.js
    self.addEventListener(‘message’, function(e)
    {
    self.postMessage({msg: e.data.msg});
    });
    

    View Slide

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

    View Slide

20. ΊͰͨ͠ΊͰͨ͠ ☺
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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);
    

    View Slide

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

    View Slide

27. SFRVFTU*EMF$BMMCBDLʹ࿩Λ໭͢
    

    View Slide

28. SFRVFTU*EMF$BMMCBDL
    ͷλΠϛ
    ϯά
    *EMFঢ়ଶͷ࣌ʹݺͼग़͞ΕΔ
    ΠϯλϥΫγϣϯ΍ඳըΛअຐ͢Δ͜ͱ͕ͳ͍
    Layout Paint
    Composite
    
    Layers
    Idle
    Style
    Frame
    Scripting
    Կ΋΍͍ͬͯͳ͍ঢ়ଶ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. requestIdleCallback(function(deadline) {
    while (deadline.timeRemaining() > 0) {
    var result = doSomething();
    // ಉظతʹDOMૢ࡞͸͠ͳ͍Α͏ʹ͢Δ
    requestAnimationFrame(function() {
    document.body.querySelector(‘#hoge’) =
    result;
    });
    }
    });
    

    View Slide

33. ͓·͚
    

    View Slide

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

    View Slide

35. function runInIdle(it) {
    requestIdleCallback(function(deadline) {
    var val = it.next();
    while (!val.done) {
    if (deadline.timeRemaining() <= 0) {
    runInIdle(it);
    return;
    }
    val = it.next();
    }
    });
    }
    

    View Slide

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());
    

    View Slide

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

    View Slide

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

    View Slide