Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Off the main threadの話

Off the main threadの話

Lob inc で発表した off the main thread の話です。

Yosuke Furukawa

June 26, 2018
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. • Page Speed Insights • Apache Bench • jmeter 3FRTTFD

    ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFSTFD ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ Web Performance Tools ~200X
  2. • CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճ਺ͷվળ

    $BDIF$POUSPM BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ $444QSJUF JDPO͸Ұͭʹ·ͱΊΔ *OMJOFల։ ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ ϥΠϯʹల։͢Δ
  3. • CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճ਺ͷվળ

    $BDIF$POUSPM BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ $444QSJUF JDPO͸Ұͭʹ·ͱΊΔ *OMJOFల։ ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ ϥΠϯʹల։͢Δ ͳΔ΂͘ϦΫΤετ͠ͳ͍
  4. Ϩεϙϯε͢ΔόΠτ਺ͷվળ • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ • imagemagick, AWS Lambda • webp, png,

    gif, jpeg • JS, css ͷ minify, gzipԽ ద੾ͳը૾ϑΥʔϚοτͷબ୒ TDSJQU΍TUZMF͸NJOJGZͯ͠H[JQʹ͢Δ ͜ͱͰখͯ͘͞͠഑৴
  5. Ϩεϙϯε͢ΔόΠτ਺ͷվળ • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ • imagemagick, AWS Lambda • webp, png,

    gif, jpeg • JS, css ͷ minify, gzipԽ ద੾ͳը૾ϑΥʔϚοτͷબ୒ TDSJQU΍TUZMF͸NJOJGZͯ͠H[JQʹ͢Δ ͜ͱͰখͯ͘͞͠഑৴ Ϩεϙϯε͢ΔόΠτ਺͕ݮΕ͹ଳ Ҭͷѹഭ͕ݮΔɺ࣌ؒ΋গͳ͘ͳΔ
  6. Web Performance ~2016 • Network Optimization • HTTP/2 • Single

    Page Application • Partial Rendering • Ajax
  7. ͜Ε·ͰͷύϑΥʔϚϯεͷ γϣʔτ·ͱΊ • ϘτϧωοΫ͸ωοτϫʔΫͱදࣔॲཧ • ϦΫΤετ਺Λվળ • ϨεϙϯεͷόΠταΠζΛվળ • ϨΠςϯγΛվળ

    • ࠩ෼ϨϯμϦϯάʹΑͬͯදࣔޮ཰Խ΋࣮ࢪ վળϙΠϯτ͕ʰϦΫΤετ͔ͯ͠Βදࣔ͞ΕΔ·Ͱʱɺ͔Β ʰදࣔޙͷૢ࡞Ͱ͖Δ·ͰʱʹਪҠ͖͍ͯͯ͠Δ
  8. Off the Main Thread ͷ࿩ • ʰϖʔδ͕දࣔ͞ΕΔ·Ͱʱͷվળ͸͜Ε· Ͱ΋͜Ε͔Β΋࣮ࢪத • ʰૢ࡞Ͱ͖ΔΑ͏ʹͳΔʱ·ͨ͸ʰૢ࡞͕ޮ

    ཰తʹͳΔʱվળ͕ࠓޙͷΩʔʹͳΔɻ • ʰOff the Main Threadʱ ͸͜ͷվળͷҰͭͷ ςʔϚ
  9. ͦ΋ͦ΋First ViewͱҰޱʹ ݴͬͯ΋छྨ͕͋Δ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU

    'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ *NBHF 5JNF5P *OUFSBDUJWF +4MPBEFE *NBHF 'VMMZ-PBEFE BMMSFTPVSDFTBSF MPBEFE *NBHF
  10. ͦ΋ͦ΋First ViewͱҰޱʹ ݴͬͯ΋छྨ͕͋Δ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU

    7JTVBMMZSFBEZ *NBHF 5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF දࣔͯ͠ಡΊΔΑ͏ʹͳΔ·Ͱ ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ૢ࡞த
  11. Off the Main Thread ͱ͸ • Main Thread ͰͷॲཧΛۃྗখ͘͞Ͱ͖ΔΑ͏ʹ͍ͯ͠ ͜͏ͱ͍͏ࢼΈʢ·ͩԿ͔݁࿦͕ग़ͯΔΘ͚Ͱ͸ͳ͍ʣ

    • Main Threadͷॲཧ͕ॏ͘ͳΔͱUI Jankͱݺ͹ΕΔʰΧ ΫπΩɾΨλπΩɾҰݟಈ͍ͯͳ͍͔ͷΑ͏ʹݟ͑Δো ֐ʱ͕ൃੜ͢Δ • Main Thread ͔Β Worker Thread Λ͏·͘࢖͑ΔΑ͏ ʹɺͱ͍͏ͷ͕τϐοΫͷҰͭɻ
  12. ChromeͷऔΓ૊Έ • PerformanceObserver ͔Β LongTask (50ms Ҏ্͔͔Δtask)Λ؂ࢹͰ͖ΔΑ͏ʹɻ var observer =

    new PerformanceObserver(function(list) { var perfEntries = list.getEntries(); for (var i = 0; i < perfEntries.length; i++) { // LongTaskͷ࣮ߦதͰ͋Δ͜ͱΛ௨஌ // ௨஌ͨ͠Βϩάʹॻ͘ͳͲͷղੳʹ׆͔͢ } }); // long task Λ؍ଌՄೳʹɻ observer.observe({entryTypes: ["longtask"]}); https://github.com/w3c/longtasks
  13. • Worker API: 
 ࠓ͸ϝοηʔδύογϯάʹΑΔڠௐϞσϧ WebWorker // main.js var worker

    = new Worker('worker.js'); worker.addEventListener('message',(e) => { // message ड৴ console.log('Worker send: ', e.data); }); // messageૹ৴ worker.postMessage('Hello World'); // worker.js self.addEventListener('message',(e) => { // message ड৴ console.log('Main send:', e.data); // message ૹ৴ self.postMessage(e.data); });
  14. • Worker API: 
 ࠓ͸ϝοηʔδύογϯάʹΑΔڠௐϞσϧ WebWorker // main.js var worker

    = new Worker('worker.js'); worker.addEventListener('message',(e) => { // message ड৴ console.log('Worker send: ', e.data); }); // messageૹ৴ worker.postMessage('Hello World'); // worker.js self.addEventListener('message',(e) => { // message ड৴ console.log('Main send:', e.data); // message ૹ৴ self.postMessage(e.data); }); γϯϓϧͳ΋ͷͷɺλεΫͷεέδϡʔϦϯά΍ϝϞϦڞ༗ͳ ͲͰ΋ͬͱ8FCͷ࢓૊ΈશମͰΑΓྑ͍"1*΍ํ๏Λ໛ࡧத
  15. Make Worker Better Again • ͦ΋ͦ΋ JavaScript ্Ͱ࣮ࢪ͢ΔͷʹҰ൪͋ͬ ͨϚϧνεϨουϞσϧ͸Կͳͷ͔ʁ •

    SharedArrayBuffer࢖͏ͷ͕͍͍ͷʁ • WebKitͷํ͸Concurrent JavaScriptͷఏҊ ΋͍ͯͨ͠ɻ
  16. Make Worker Better Again • Tasklets API • Task ୯ҐͰখ͘͞background

    taskͱ࣮ͯ͠ ߦͤ͞Δ࢓૊Έ https://nhiroki.jp/2017/12/10/javascript-parallel-processing#6-worklet
  17. Make Worker Better Again // Main const worker = new

    Worker('transcode.js'); worker.onmessage = event => { const transcoder = event.data; await fetch('bunny.vp10') .pipeThrough(transcoder) .pipeTo(videoSink); }; // Worker ଆ importScripts('vp10decode.js', 'mp4encode.js'); const transcoder = new TransformStream({ transform(chunk, controller) { const decoded = vp10decode(chunk); controller.enqueue(mp4encode(decoded)); } }); postMessage(transcoder, [transcoder]);
  18. Make Worker Better Again • blöcks • syntax parse, serialize

    ΛผεϨουͰͰ͖Δ Α͏ʹ͢ΔͨΊͷ৽͍͠ఏҊ // {| … |} ͰผWorker thread Ͱ parse ͤ͞Δ const result = await worker({| const res = await fetch("people.json"); const json = await res.json(); return json[2].firstName; |});
  19. Off the main thread·ͱΊ • main threadʹෛՙ͕͔͔Βͳ͍Α͏ʹlighthouseͰϝτϦΫεΛऔΕ ΔΑ͏ʹ͍ͯ͠Δ • Performance

    ObserverͰLongTaskΛݕ஌͢ΔAPI΋࢓༷ࡦఆத • Worker APIΛ΋ͬͱ࢖͍΍͘͢͢ΔͨΊͷٞ࿦Λ࣮ࢪத • SchedulerͲ͏͢Δ͔ • σʔλڞ༗͸Ͳ͏͢Δ͔ • Tasklets, Transferable Stream, blöcks etc etc
  20. ·ͱΊ • Web Performance ͷ͜Ε·Ͱ • දࣔͰ͖Δ·Ͱͷߴ଎Խ • ϦΫΤετΛݮΒ͢ɾϨεϙϯεͷόΠταΠζΛݮΒ͢ •

    ϨΠςϯγΛ࡟Δ (http2) • ෦෼ϨϯμϦϯά (Single Page Apps) • Web Performance ͷ͜Ε͔Β • ૢ࡞Ͱ͖Δ·Ͱɺૢ࡞͔ͯ͠Βͷߴ଎Խ • ͦͷҰ͕ͭWebWorkerΛΑΓྑ͘͢Δํ޲΁ • Worker ʹ͸ເ͕·ͩ٧·ͬͯΔɺࢥ͍͕͋Ε͹ੋඇ࢓༷ࢀՃ΁
  21. ࢀߟࢿྉ • ΢Σϒϒϥ΢βͷ off-the-main-thread API ͷ࿩ https://nhiroki.jp/2018/05/07/off-the-main- thread-api • off

    the main thread with workers https://speakerdeck.com/kosamari/off-the-main-thread-with- workers • improving the developer experience for doing work off the main thread http://bit.ly/blinkon9- omt • web application 2018 from performance perspective https://speakerdeck.com/ yosuke_furukawa/web-application-2018-from-performance-perspective • Speed Focus for 2018 https://docs.google.com/presentation/d/1OBij2sz6gNU- VCrNz7REvJ4piiM21YZnVCUnl6MjUas/edit#slide=id.g372bf772fc_0_55 • high performance web sites https://www.amazon.co.jp/dp/B0028N4WHY/ • high performance browser networking https://www.amazon.co.jp/dp/B00FM0OC4S/