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

技術面からみる パフォーマンス改善 / Frontrend Vol.13 Dec 19th, ...

tsuyoshi wada
December 19, 2018

技術面からみる パフォーマンス改善 / Frontrend Vol.13 Dec 19th, 2018

Chrome Dev Summit 2018 の内容を共有。
発表の中では少し端折ったところもありましたので、こちらで参照いただけますと幸いです。このスライドを見た上で、YouTube に上がっている動画を見ることでより深い理解につながれば幸いです。

CDS 2018 の YouTube 動画はこちら:
https://www.youtube.com/playlist?list=PLNYkxOF6rcIDjlCx1PcphPpmf43aKOAdF

tsuyoshi wada

December 19, 2018
Tweet

More Decks by tsuyoshi wada

Other Decks in Programming

Transcript

  1. DISPNFEFWTVNNJUCSJFpOHTFTTJPO લఏͱͯ͠3FRVFTUʹ͸ͭͷछྨ͕͋Δ w /BWJHBUJPOSFRVFTUT w 8FCϖʔδࣗମͷ3FRVFTU w Ωϟογϡ͕೉͍͠ w ͔͠͠ɺύϑΥʔϚϯε΁ͷΠϯύΫτ͕Ͱ͔͍

    w 3FTPVSDFSFRVFTUT w 8FCϖʔδ಺ʹࢀর͞ΕΔΞηοτͷ3FRVFTU w +BWB4DSJQUɺ$44ɺ*NBHFT౳ w Ωϟογϡ͕༰қͰར༻ྫ΋ଟ͍
  2. DISPNFEFWTVNNJUCSJFpOHTFTTJPO /BWJHBUJPOSFRVFTUTͷ࠷దԽΛਤΔ w Ωϟογϡ͔Β͙͢ʹίϯςϯπΛฦ͢ w 8PSLCPYΛ࢖͏ͱ؆୯ʹಋೖͰ͖Δ w XPSLCPYTUSBUFHJFTDBDIF'JSTU  w

    XPSLCPYTUSBUFHJFTTUBMF8IJMF3FWBMJEBUF  w ΩϟογϡΛฦ٫ͨ͋͠ͱʹɺόοΫάϥ΢ϯυͰ࠷ ৽ͷϦιʔεΛऔಘ͢ΔΑ͏ʹ͢Δ
  3. DISPNFEFWTVNNJUCSJFpOHTFTTJPO workbox.routing.registerRoute( '/about', workbox.streams.strategy([ cacheFirst.makeRequest({ request: new Request(‘/_header.html’), }), networkFisrt.makeRequest({

    request: new Request(‘/about.content.html’), }), cacheFirst.makeRequest({ request: new Request(‘/_footer.html’), }), ]), ); 8PSLCPYΛ࢖͏ͱ؆୯ͳهड़ͰରԠͰ͖Δ Ωϟογϡ༏ઌ͔ɺ/FUXPSL༏ઌ͔ͷΩϟογϡઓུΛॊೈʹ૊Ή͜ͱ͕ॏཁ
  4. DISPNFEFWTVNNJUCSJFpOHTFTTJPO 1SFDBDIJOH DSJUJDBM w ϝϦοτ w ࣮૷ͱ੍ޚɺߋ৽͕ൺֱత༰қ w αΠζ΋طʹ෼͔͍ͬͯΔ΋ͷ͕΄ͱΜͲ w

    σϝϦοτ w ೚ҙͷλΠϛϯάͰΩϟογϡ੍ޚ͕ඞཁ w ઌߦͯ͠/FUXPSLίετ͕ඞཁ w ࣮ࡍʹ͸ෆඞཁͳ63-ΛΩϟογϡͯ͠͠·͏ Մೳੑ͕͋Δ
  5. DISPNFEFWTVNNJUCSJFpOHTFTTJPO 3VOUJNFDBDIJOH OPODSJUJDBM w ϝϦοτ w औಘࡁΈը૾ɺΤϯτϦϙΠϯτʹԠͨ͡Ωϟογϡ ౳ʹద͍ͯ͠Δ w σϝϦοτ

    w Ωϟογϡͷ੔߹ੑ୲อ͕೉͍͠ w ίϯςϯπϋογϡ΍ɺ3FWJTJPOɺϑΝΠϧ໊ͷ޻ ෉Ͱճආ w Ωϟογϡ͕ͲΜͲΜ૿͑ͯ͠·͏ ͭ·ΓαΠζ ͕ෆఆ
  6. DISPNFEFWTVNNJUCSJFpOHTFTTJPO const { usage, quota } = await navigator.storage.estimate(); 4UPSBHF.BOBHFS"1*Λ࢖੍ͬͨޚ

    2VPUBΛ௒͑ͳ͍Α͏ʹ੍ޚΛ͢Δ͜ͱ͕ग़དྷΔɻ 8PSLCPYͷ&YQJSBUJPO1MVHJOΛ࢖͏͜ͱͰ؆୯ʹ࢖༻͢Δ͜ͱ΋ग़དྷΔɻ IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTXPSLCPYSFGFSFODFEPDTMBUFTUXPSLCPYFYQJSBUJPO1MVHJO
  7. DISPNFEFWTVNNJUCSJFpOHTFTTJPO w 8FCͷͨΊͷ৽͍͠ݴޠ w ͨͩ͠ɺ8FCҎ֎Ͱ΋׆༻Ͱ͖ΔΑ͏ͳॊೈੑ΋ w +BWB4DSJQUΛஔ͖׵͑ΔΑ͏ͳ΋ͷͰ͸ͳ͍ w ผͷݴޠ͔ΒίϯύΠϧ͞ΕΔ w

    ߴ͍৴པੑɺߴ͍ύϑΥʔϚϯεΛఏڙͰ͖ΔՄೳੑ ͕͋Δ w ೥Ҏ্લʹ+BWB4DSJQU͕஀ੜͯ͠Ҏདྷɺϝδϟʔϒ ϥ΢βͰͪΌΜͱαϙʔτ͞ΕΔॳΊͯͷݴޠ w ϙʔλϏϦςΟʹ΋༏Ε͍ͯͯɺ$ Ͱॻ͔Εͨίʔ υͳͲΛ׆༻͢Δ͜ͱ͕Ͱ͖Δ
  8. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ڈ೥औΓ૊Μͩ৽ػೳ w 4PVSDF.BQT w σόοάʹ͸ෆՄܽʂ w #SFBLQPJOUͷઃఆ౳΋Մೳ w 4USFBNJOH$PNQJMBUJPO

    w ͜Ε·Ͱ͸Ϟδϡʔϧશମ͕ಡΈࠐ·ΕΔ·Ͱ࣮ ߦΛ଴ػ͢Δඞཁ͕͋ͬͨ w μ΢ϯϩʔυͱ࣮ߦΛಉ࣌ʹߦ͑ΔΑ͏ʹ
  9. DISPNFEFWTVNNJUCSJFpOHTFTTJPO (async () => { const promise = fetch('./fibonacci.wasm'); const

    { instance } = await WebAssembly.instantiateStreaming(promise); const result = instance.exports.fibonacci(42); document.querySelector('main').textContent = `The Fibonacci is ${result}`; }); 8FC"TTFNCMZJOTUBOUJBUF4USFBNJOH IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC+BWB4DSJQU3FGFSFODF(MPCBM@0CKFDUT8FC"TTFNCMZJOTUBOUJBUF4USFBNJOH
  10. DISPNFEFWTVNNJUCSJFpOHTFTTJPO 4LFUDI6Q w %ϞσϦϯάιϑτ΢ΣΞ w %FTLUPQ"QQ .PCJMF J04 "OESPJE ͷڞ௨Ͱ࢖༻

    ͞Ε͍ͯΔ$ ͷίʔυΛ&NTDSJQUFOͰίϯύΠ ϧͯ͠ྲྀ༻ w ࠷ॳͷҠߦ࡞ۀͰ͸ਓͷΤϯδχΞ͔͍͠ͳ͔ͬͨ ͕ɺϲ݄Ͱ࡞ۀΛऴ͑Δ͜ͱ͕Ͱ͖ͨʂ w ಉ࣌ظʹ4VCTDSJQUJPOϞσϧΛެ։ɺϲ݄ͷؒͰސ ٬ϕʔεΛ૿΍͢͜ͱʹ੒ޭ IUUQTXXXTLFUDIVQDPN
  11. DISPNFEFWTVNNJUCSJFpOHTFTTJPO 4PVOEBUJPO w 8FCϕʔεͷ.VTJD4UVEJP w εϜʔζͳૢ࡞ମݧΛ࣮ݱ͢ΔͨΊʹ"VEJP 8PSLMFUT 8FC"TTFNCMZ 4IBSFE"SSBZ#V⒎FS౳ͷ Τοδͳٕज़Λ࠾༻

    w .VMUJUISFBEͳ8FC"TTFNCMZ͸"VEJP.JYJOH &OHJOFͷ෦෼΁ద༻ w 4JOHMFUISFBEͷ৔߹͸࠶ੜԻ్͕੾Ε్੾ΕʹͳΔ ͕ɺ.VMUJUISFBEͷ৔߹͸ɺεϜʔζͳ࠶ੜ͕Մೳʹ w $16ར༻཰΋൒෼ҎԼʹͳͬͨ IUUQTTPVOEBUJPODPN
  12. DISPNFEFWTVNNJUCSJFpOHTFTTJPO ରࡦͱͯ͠༏ઌ౓ʹԠͨ͡λεΫ෼͚ w λεΫ͸ͭʹ෼ྨ͞ΕΔ w VTFSCMPDLJOHUBTLT w ࣮૷ऴྃ·Ͱʹ࣌ؒత੍໿͕͋Δॲཧ w EFGBVMUUBTLT

    w Ϣʔβʹݟ͑Δॲཧ w JEMFUBTLT w Ϣʔβʹݟ͑ͳ͍ॲཧ CBDLVQ΍BOBMZUJDTͳͲ  w ͦΕͧΕS"'TFU5JNFPVUSFRVFTU*EMF$BMMCBDLͰͰ͖Δ͚Ͳ TFU5JNFPVU͸গ͠ෆ҆ఆͳͷͰઐ༻"1*͕ඞཁ w ΋ͬͱঢ়ଶΛίϯτϩʔϧͰ͖ΔΑ͏ʹ͢ΔͨΊʹ"1*Λ௥Ճ͢Δ
  13. DISPNFEFWTVNNJUCSJFpOHTFTTJPO 8FC8PSLFSTͷ࢖͍ॴ w ࢖͏΂͖ w ௕͍ϒϩοΩϯά͕ൃੜͦ͠͏ͳॲཧ w ೖग़ྗͷখ͞ͳॲཧ w 3FRVFTU3FTQPOTFʹै͏৔߹

    w ࢖Θͳ͍΂͖ w %0.΁ͷґଘ͕͋Δ৔߹ w ೖྗ΁ͷԠ౴ॲཧ w খ͞ͳ஗ԆͰϨεϙϯεΛฦ͢ඞཁ͕͋Δ৔߹