Off the main threadの話

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

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 3FRT
    
    TFD
    ඵؒͰԿճϦΫΤετΛ͞͹͚͔ͨ USBOTGFS
    
    TFD
    ඵؒͰԿ#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͸%-ͨ͠ΒΩϟογϡͤ͞Δ $44
    4QSJUF
    JDPO͸Ұͭʹ·ͱΊΔ *OMJOF
    ల։
    ͻͱ໨ݟͯग़ͯ͘ΔྖҬ͸$44ΛΠϯ ϥΠϯʹల։͢Δ
19. • CSS Sprite • Inline ల։ • Cache Control ϦΫΤετճ਺ͷվળ $BDIF$POUSPM
    BTTFU͸%-ͨ͠ΒΩϟογϡͤ͞Δ $44
    4QSJUF
    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/ 1BSUJBM
    3FOEFS
35. ෦෼ϨϯμϦϯά͢Δ • Ajax ௨৴Λجຊͱͯ͠෦෼ϨϯμϦϯάΛ͢ Δ͜ͱͰߴ଎Խ͢Δํ๏ DMJDL (&5
    +40/ 1BSUJBM
    3FOEFS 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ͱҰޱʹ ݴͬͯ΋छྨ͕͋Δ /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ *NBHF 5JNF
    5P
    *OUFSBDUJWF
    +4
    MPBEFE *NBHF 'VMMZ
    -PBEFE
    BMM
    SFTPVSDFT
    BSF
    MPBEFE *NBHF
41. ͦ΋ͦ΋First ViewͱҰޱʹ ݴͬͯ΋छྨ͕͋Δ /BWJHBUJPO
    4UBSU 'JSTU
    1BJOU 'JSTU
    $POUFOUGVM
    1BJOU Loading.. 'JSTU
    .FBOJOHGVM
    1BJOU 7JTVBMMZ
    SFBEZ *NBHF 5JNF
    5P
    *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/