$30 off During Our Annual Pro Sale. View details »

Off the main threadの話

Off the main threadの話

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

Yosuke Furukawa
PRO

June 26, 2018
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. off the main thread ͷ࿩ 2018/06/26 @Lob inc

  2. Twitter: @yosuke_furukawa Github: yosuke-furukawa

  3. 2018/11/23 - 24 Node ֶԂࡇ։࠵ https://bit.ly/nodefest2018

  4. ϑϩϯτΤϯυνʔϜ͔Β8FC8PSLFSͷ ۙگ౳ʑʹ͍ͭͯฉ͖͍ͨͬͯϦΫΤετ͕ ͋Γ·͢Ͷɻ

  5. ʊਓਓਓਓਓਓਓਓਓʊ ʼɹಥવͷWorkerͷ࿩ɹʻ ʉY^Y^Y^Y^Y^Y^Yʉ

  6. WebWorkerΛ͍͖ͳΓ੾Γ औͬͯ΋ઌ୺ͷ࿩͗͢͠Δ 8PSLFSͷ࿩͸ࠓͷύϑΥʔ Ϛϯεͷಥ୺

  7. WebWorkerΛ͍͖ͳΓ੾Γ औͬͯ΋ઌ୺ͷ࿩͗͢͠Δ ຒ·͍ͬͯΔ͜ͷ෦෼ͷ࿩ Λઌʹͯ͠ɺͦΕ͔Β 8PSLFSͷ࿩Λɻ

  8. Web Performance 
 2000 - 2017

  9. Performance Bible ~200X

  10. Performance Bible ~200X

  11. Performance Bible ~200X )551ϦΫΤετΛ࠷খݶʹ͠Α͏ $%/Λ࢖͓͏ $BDIF$POUSPMΛ࢖͓͏FUD Ϣʔβʔ͸ϑϩϯτΤϯυͰ 80 ~ 90%

    ͷ࣌ؒ଴ػ͍ͯ͠Δ
  12. Previous Web Applications

  13. Web Performance ~200X • Measuring Time from Request to Response

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

    ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFSTFD ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ Web Performance Tools ~200X
  15. Web Performance ~ 200X • ΍Δ͜ͱ • ϦΫΤετճ਺ͷվળ • Ϩεϙϯε͢ΔόΠτ਺ͷվળ

  16. ϦΫΤετճ਺ͷվળ • αΠτΛߴ଎ʹ͢ΔҰ൪ͷํ๏͸
 ͦ΋ͦ΋ϦΫΤετ͠ͳ͍͜ͱ • ۃྗϦΫΤετ਺ΛݮΒ͢ • ex: CSSΛ1ϑΝΠϧʹɺJS΋ಉ༷ɻ

  17. ϦΫΤετճ਺ͷվળ • CSS Sprite • Inline ల։ • Cache Control

  18. • CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճ਺ͷվળ

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

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

    gif, jpeg • JS, css ͷ minify, gzipԽ
  21. Ϩεϙϯε͢ΔόΠτ਺ͷվળ • ద੾ͳը૾ϑΥʔϚοτͷબ୒ɺϦαΠζ • imagemagick, AWS Lambda • webp, png,

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

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

  24. Performance Bible 2010-2016

  25. Performance Bible 2010-2016

  26. Performance Bible 2010-2016 ॲཧͷத৺͕αʔό͔Βϒϥ΢β΁ ϨΠςϯγΛখ͘͞ɻ

  27. Web Performance ~ 201X • ΍Δ͜ͱ • ϨΠςϯγΛԼ͛Δ • HTTPͷ௨৴ίετΛԼ͛Δ

    • ෦෼ϨϯμϦϯά͢Δ
  28. HTTPͷ௨৴ίετΛԼ͛Δ • 1ͭͷHTTP઀ଓΛແବʹ͠ͳ͍ • ຖճHTTP઀ଓ͢Δͷ͸ωοτϫʔΫϨΠϠͰݟΔ ͱίετ͕ߴ͍ • 1ͭͷHTTP઀ଓͷதͰϦΫΤετΛଟॏԽ͢Δ • ઀ଓͬ͠ͺͳ͠ʹͳΔ͜ͱͰೖΕΒΕΔ࠷దԽ΋͋

    ΔʢH2 Push, etcʣ
  29. HTTPͷ௨৴ίετΛԼ͛Δ • 1ͭͷHTTP઀ଓΛແବʹ͠ͳ͍ • ຖճHTTP઀ଓ͢Δͷ͸ωοτϫʔΫϨΠϠͰݟΔ ͱίετ͕ߴ͍ • 1ͭͷHTTP઀ଓͷதͰϦΫΤετΛଟॏԽ͢Δ • ઀ଓͬ͠ͺͳ͠ʹͳΔ͜ͱͰೖΕΒΕΔ࠷దԽ΋

    ͋Δʢޙड़ʣ )551
  30. HTTP2 • ଟॏԽ͞ΕͨϦΫΤετΛૹΔ • HTTP/1.1 ࣌୅ΑΓ΋1ͭͷωοτϫʔΫ઀ଓ Λ࢖ͬͨ࠷దԽ͕ߦΘΕΔΑ͏ʹɻ • Prioritization, Server

    Push, Early Hints ଳҬ෯͕૿͑ͯ΋ϨΠςϯγ͕ݮΒͳ ͍ͱࠓޙͷߴ଎Խ͕Ͱ͖ͳ͍
  31. ෦෼ϨϯμϦϯά͢Δ • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏

  32. ෦෼ϨϯμϦϯά͢Δ • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL

  33. ෦෼ϨϯμϦϯά͢Δ • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5+40/

  34. ෦෼ϨϯμϦϯά͢Δ • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5+40/ 1BSUJBM3FOEFS

  35. ෦෼ϨϯμϦϯά͢Δ • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5+40/ 1BSUJBM3FOEFS 3JDIͳ8FC"QQMJDBUJPO͸େମ͜ ͏ͳ͖͍ͬͯͯΔɻ

  36. Web Performance ~2016 • Network Optimization • HTTP/2 • Single

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

    • ࠩ෼ϨϯμϦϯάʹΑͬͯදࣔޮ཰Խ΋࣮ࢪ
  38. ͜Ε·ͰͷύϑΥʔϚϯεͷ γϣʔτ·ͱΊ • ϘτϧωοΫ͸ωοτϫʔΫͱදࣔॲཧ • ϦΫΤετ਺Λվળ • ϨεϙϯεͷόΠταΠζΛվળ • ϨΠςϯγΛվળ

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

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

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

    • Main Threadͷॲཧ͕ॏ͘ͳΔͱUI Jankͱݺ͹ΕΔʰΧ ΫπΩɾΨλπΩɾҰݟಈ͍ͯͳ͍͔ͷΑ͏ʹݟ͑Δো ֐ʱ͕ൃੜ͢Δ • Main Thread ͔Β Worker Thread Λ͏·͘࢖͑ΔΑ͏ ʹɺͱ͍͏ͷ͕τϐοΫͷҰͭɻ
  43. Off the Main Thread • ϒϥ΢β͔Β΋main thread͕ࢥ͍ͱೖྗͰ͖ Δͷ͕஗͘ͳͬͨΓɺεΫϩʔϧ͕Ψλ͍ͭ ͨΓ͢Δ https://docs.google.com/presentation/d/1OBij2sz6gNU-VCrNz7REvJ4piiM21YZnVCUnl6MjUas/

    edit#slide=id.g372bf772fc_0_55
  44. ChromeͷऔΓ૊Έ • lighthouse Ͱ͸ main thread ͷॲཧ͕ॏ͍ͱ ܯࠂ͕ग़ΔʢϝτϦΫεΛվળʣɻ • ࣮ࡍʹPerformance

    Tab ͷத͔Βಛఆ͢Δ͜ ͱ΋Մೳ
  45. 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
  46. ChromeͷऔΓ૊Έ • Worker APIΛΑΓ࢖͍΍͘͢͢Δٞ࿦͕͋Δ https://drive.google.com/file/d/ 18V0baK57sAUFtD6uO9neLtZY8pR-Fzvn/view

  47. • 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); });
  48. • 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*΍ํ๏Λ໛ࡧத
  49. Make Worker Better Again • WebWorkerͰλεΫฒྻԽ͸Ͱ͖ͯ΋εέ δϡʔϦϯά͕໰୊ʹͳΔɻ • աڈʹ͸JS Schedulerͷproposal΋ɻ

  50. Make Worker Better Again • ͦ΋ͦ΋ JavaScript ্Ͱ࣮ࢪ͢ΔͷʹҰ൪͋ͬ ͨϚϧνεϨουϞσϧ͸Կͳͷ͔ʁ •

    SharedArrayBuffer࢖͏ͷ͕͍͍ͷʁ • WebKitͷํ͸Concurrent JavaScriptͷఏҊ ΋͍ͯͨ͠ɻ
  51. Make Worker Better Again • WebKitͷํ͕JSͰฒߦॲཧ͢Δͱ͖ͷํ๏ɺಛʹ SharedArrayBufferΛ࢖ͬͨϞσϧΛৄղ • SharedArrayBuffer࢖͏ͷ͕͍͍ͷʁ •

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

    taskͱ࣮ͯ͠ ߦͤ͞Δ࢓૊Έ https://nhiroki.jp/2017/12/10/javascript-parallel-processing#6-worklet
  53. Make Worker Better Again • StreamͰWorkerܦ༝ͰσʔλՃ޻ • Main͔ΒTransform Workerʹྲྀ͢

  54. 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]);
  55. 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; |});
  56. Off the main thread·ͱΊ • main threadʹෛՙ͕͔͔Βͳ͍Α͏ʹlighthouseͰϝτϦΫεΛऔΕ ΔΑ͏ʹ͍ͯ͠Δ • Performance

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

    ϨΠςϯγΛ࡟Δ (http2) • ෦෼ϨϯμϦϯά (Single Page Apps) • Web Performance ͷ͜Ε͔Β • ૢ࡞Ͱ͖Δ·Ͱɺૢ࡞͔ͯ͠Βͷߴ଎Խ • ͦͷҰ͕ͭWebWorkerΛΑΓྑ͘͢Δํ޲΁ • Worker ʹ͸ເ͕·ͩ٧·ͬͯΔɺࢥ͍͕͋Ε͹ੋඇ࢓༷ࢀՃ΁
  58. ࢀߟࢿྉ • ΢Σϒϒϥ΢βͷ 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/