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

Twitter: @yosuke_furukawa Github: yosuke-furukawa

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

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

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

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

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

Web Performance 
 2000 - 2017

Performance Bible ~200X

Performance Bible ~200X

Performance Bible ~200X )551ϦΫΤετΛ࠷খݶʹ͠Α͏ $%/Λ࢖͓͏ $BDIF$POUSPMΛ࢖͓͏FUD Ϣʔβʔ͸ϑϩϯτΤϯυͰ 80 ~ 90% ͷ࣌ؒ଴ػ͍ͯ͠Δ

Previous Web Applications

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

• Page Speed Insights • Apache Bench • jmeter 3FRTTFD ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFSTFD ඵؒͰԿ#ZUFΛૹΕ͔ͨ -BUFODZ ߦ͔ͬͯΒฦͬͯ͘Δ·Ͱͷ࣌ؒ Web Performance Tools ~200X

Web Performance ~ 200X • ΍Δ͜ͱ • ϦΫΤετճ਺ͷվળ • Ϩεϙϯε͢ΔόΠτ਺ͷվળ

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

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

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

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

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

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

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

Web Performance 2010-2016

Performance Bible 2010-2016

Performance Bible 2010-2016

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

Web Performance ~ 201X • ΍Δ͜ͱ • ϨΠςϯγΛԼ͛Δ • HTTPͷ௨৴ίετΛԼ͛Δ • ෦෼ϨϯμϦϯά͢Δ

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

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

HTTP2 • ଟॏԽ͞ΕͨϦΫΤετΛૹΔ • HTTP/1.1 ࣌୅ΑΓ΋1ͭͷωοτϫʔΫ઀ଓ Λ࢖ͬͨ࠷దԽ͕ߦΘΕΔΑ͏ʹɻ • Prioritization, Server Push, Early Hints ଳҬ෯͕૿͑ͯ΋ϨΠςϯγ͕ݮΒͳ ͍ͱࠓޙͷߴ଎Խ͕Ͱ͖ͳ͍

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

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

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

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

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

Web Performance ~2016 • Network Optimization • HTTP/2 • Single Page Application • Partial Rendering • Ajax

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

͜Ε·ͰͷύϑΥʔϚϯεͷ γϣʔτ·ͱΊ • ϘτϧωοΫ͸ωοτϫʔΫͱදࣔॲཧ • ϦΫΤετ਺Λվળ • ϨεϙϯεͷόΠταΠζΛվળ • ϨΠςϯγΛվળ • ࠩ෼ϨϯμϦϯάʹΑͬͯදࣔޮ཰Խ΋࣮ࢪ վળϙΠϯτ͕ʰϦΫΤετ͔ͯ͠Βදࣔ͞ΕΔ·Ͱʱɺ͔Β ʰදࣔޙͷૢ࡞Ͱ͖Δ·ͰʱʹਪҠ͖͍ͯͯ͠Δ

Off the Main Thread ͷ࿩ • ʰϖʔδ͕දࣔ͞ΕΔ·Ͱʱͷվળ͸͜Ε· Ͱ΋͜Ε͔Β΋࣮ࢪத • ʰૢ࡞Ͱ͖ΔΑ͏ʹͳΔʱ·ͨ͸ʰૢ࡞͕ޮ ཰తʹͳΔʱվળ͕ࠓޙͷΩʔʹͳΔɻ • ʰOff the Main Threadʱ ͸͜ͷվળͷҰͭͷ ςʔϚ

ͦ΋ͦ΋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

ͦ΋ͦ΋First ViewͱҰޱʹ ݴͬͯ΋छྨ͕͋Δ /BWJHBUJPO4UBSU 'JSTU1BJOU 'JSTU$POUFOUGVM 1BJOU Loading.. 'JSTU.FBOJOHGVM 1BJOU 7JTVBMMZSFBEZ *NBHF 5JNF5P*OUFSBDUJWF *NBHF 'VMMZ-PBEFE *NBHF දࣔͯ͠ಡΊΔΑ͏ʹͳΔ·Ͱ ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ ૢ࡞த

Off the Main Thread ͱ͸ • Main Thread ͰͷॲཧΛۃྗখ͘͞Ͱ͖ΔΑ͏ʹ͍ͯ͠ ͜͏ͱ͍͏ࢼΈʢ·ͩԿ͔݁࿦͕ग़ͯΔΘ͚Ͱ͸ͳ͍ʣ • Main Threadͷॲཧ͕ॏ͘ͳΔͱUI Jankͱݺ͹ΕΔʰΧ ΫπΩɾΨλπΩɾҰݟಈ͍ͯͳ͍͔ͷΑ͏ʹݟ͑Δো ֐ʱ͕ൃੜ͢Δ • Main Thread ͔Β Worker Thread Λ͏·͘࢖͑ΔΑ͏ ʹɺͱ͍͏ͷ͕τϐοΫͷҰͭɻ

Off the Main Thread • ϒϥ΢β͔Β΋main thread͕ࢥ͍ͱೖྗͰ͖ Δͷ͕஗͘ͳͬͨΓɺεΫϩʔϧ͕Ψλ͍ͭ ͨΓ͢Δ https://docs.google.com/presentation/d/1OBij2sz6gNU-VCrNz7REvJ4piiM21YZnVCUnl6MjUas/ edit#slide=id.g372bf772fc_0_55

ChromeͷऔΓ૊Έ • lighthouse Ͱ͸ main thread ͷॲཧ͕ॏ͍ͱ ܯࠂ͕ग़ΔʢϝτϦΫεΛվળʣɻ • ࣮ࡍʹPerformance Tab ͷத͔Βಛఆ͢Δ͜ ͱ΋Մೳ

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

ChromeͷऔΓ૊Έ • Worker APIΛΑΓ࢖͍΍͘͢͢Δٞ࿦͕͋Δ https://drive.google.com/file/d/ 18V0baK57sAUFtD6uO9neLtZY8pR-Fzvn/view

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

• 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*΍ํ๏Λ໛ࡧத

Make Worker Better Again • WebWorkerͰλεΫฒྻԽ͸Ͱ͖ͯ΋εέ δϡʔϦϯά͕໰୊ʹͳΔɻ • աڈʹ͸JS Schedulerͷproposal΋ɻ

Make Worker Better Again • ͦ΋ͦ΋ JavaScript ্Ͱ࣮ࢪ͢ΔͷʹҰ൪͋ͬ ͨϚϧνεϨουϞσϧ͸Կͳͷ͔ʁ • SharedArrayBuffer࢖͏ͷ͕͍͍ͷʁ • WebKitͷํ͸Concurrent JavaScriptͷఏҊ ΋͍ͯͨ͠ɻ

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

Make Worker Better Again • Tasklets API • Task ୯ҐͰখ͘͞background taskͱ࣮ͯ͠ ߦͤ͞Δ࢓૊Έ https://nhiroki.jp/2017/12/10/javascript-parallel-processing#6-worklet

Make Worker Better Again • StreamͰWorkerܦ༝ͰσʔλՃ޻ • Main͔ΒTransform Workerʹྲྀ͢

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

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

Off the main thread·ͱΊ • main threadʹෛՙ͕͔͔Βͳ͍Α͏ʹlighthouseͰϝτϦΫεΛऔΕ ΔΑ͏ʹ͍ͯ͠Δ • Performance ObserverͰLongTaskΛݕ஌͢ΔAPI΋࢓༷ࡦఆத • Worker APIΛ΋ͬͱ࢖͍΍͘͢͢ΔͨΊͷٞ࿦Λ࣮ࢪத • SchedulerͲ͏͢Δ͔ • σʔλڞ༗͸Ͳ͏͢Δ͔ • Tasklets, Transferable Stream, blöcks etc etc

·ͱΊ • Web Performance ͷ͜Ε·Ͱ • දࣔͰ͖Δ·Ͱͷߴ଎Խ • ϦΫΤετΛݮΒ͢ɾϨεϙϯεͷόΠταΠζΛݮΒ͢ • ϨΠςϯγΛ࡟Δ (http2) • ෦෼ϨϯμϦϯά (Single Page Apps) • Web Performance ͷ͜Ε͔Β • ૢ࡞Ͱ͖Δ·Ͱɺૢ࡞͔ͯ͠Βͷߴ଎Խ • ͦͷҰ͕ͭWebWorkerΛΑΓྑ͘͢Δํ޲΁ • Worker ʹ͸ເ͕·ͩ٧·ͬͯΔɺࢥ͍͕͋Ε͹ੋඇ࢓༷ࢀՃ΁

ࢀߟࢿྉ • ΢Σϒϒϥ΢βͷ 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/