Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

޷ධൃചதʂ

Slide 5

Slide 5 text

ࠓճͷ࿩ requestIdleCallback()

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

;ʔΜ

Slide 12

Slide 12 text

എܠ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ΊͰͨ͠ΊͰͨ͠ ☺

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

// ΠϯϥΠϯϫʔΧʔͷྫ 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);

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

SFRVFTU*EMF$BMMCBDLʹ࿩Λ໭͢

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

͓·͚

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

// όοΫάϥ΢ϯυͰ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());

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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