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

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 'SPOUSFOE7PM%FDUI 5TVZPTIJ8BEB !XBEBDLFM ٕज़໘͔ΒΈΔ ύϑΥʔϚϯεվળ

"CPVUNF DISPNFEFWTVNNJUCSJFpOHTFTTJPO 5TVZPTIJ8BEB࿨ా߶ !XBEBDLFM w $ZCFS"HFOU *OD೥த్ೖࣾ w $"54 $MJFOU"EWBODFE5FDIOPMPHZ4UVEJP
ॴଐ w $"54ͱ͍͏૊৫ͰϦʔυΤϯδχΞΛ΍͍ͬͯ·͢

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ຊεϥΠυͷझࢫҙ޲

DISPNFEFWTVNNJUCSJFpOHTFTTJPO w $ISPNF%FW4VNNJUͷ಺༰Λڞ༗ w ൃදҎ֎ͷ৔Ͱࢀরͯ͠΋಺༰͕೺ѲͰ͖ΔΑ͏ʹจ ষΛଟ͘ࡌ͍ͤͯ·͢ w ൃද࣌ؒͷؔ܎͔ΒলུΛڬΈͭͭਐΊ·͢ w ͜ͷεϥΠυΛݟ্ͨͰɺ:PV5VCFʹ্͕͍ͬͯΔ
ಈըΛݟΔ͜ͱͰΑΓਂ͍ཧղʹͭͳ͕Ε͹޾͍Ͱ͢ IUUQTXXXZPVUVCFDPNQMBZMJTU MJTU1-/:LY0'SD*%KM$Y1DQI1QNGB,0"E'

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ຊεϥΠυͰѻ͏಺༰

DISPNFEFWTVNNJUCSJFpOHTFTTJPO w #VJMEJOH'BTUFS .PSF3FTJMJFOU"QQTXJUI4FSWJDF 8PSLFS"$BDIJOH4USBUFHZ%FFQ%JWF w 6TJOH8FC"TTFNCMZBOE5ISFBET w "2VFTUUP(VBSBOUFF3FTQPOTJWFOFTT 4DIFEVMJOH0OBOE0⒎UIF.BJO5ISFBE

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ͔͜͜Β͕ຊฤ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 4FSWJDF8PSLFSʹΑΔɺΑΓૣ͘ɺΑΓॊೈͳΞϓϦέʔγϣ ϯͷߏஙɿΩϟογϡઓུ%FFQ%JWF #VJMEJOH'BTUFS .PSF3FTJMJFOU "QQTXJUI4FSWJDF8PSLFS" $BDIJOH4USBUFHZ%FFQ%JWF

DISPNFEFWTVNNJUCSJFpOHTFTTJPO w 4FSWJDF8PSLFS͸ϝΠϯετϦʔϜͳٕज़ʹͳͬͨ w શͯͷϞμϯϒϥ΢βͰαϙʔτ͞ΕͯΔ w 4FSWJDF8PSLFSʹؔͯ͠ɺ͠͹͠͹ΦϑϥΠϯରԠ ͕࿩୊ʹऔΓ্͛ΒΕΔ w ͔͠͠ɺօ͞Μ΋͝ଘ஌ͷ௨ΓɺΦϯϥΠϯͷ8FC
αΠτʹର͢ΔύϑΥʔϚϯεվળʹ໾ཱٕͭज़ͱ͠ ͯ΋༏ल

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 4FSWJDF8PSLFSΛ࢖͏͜ͱͰ ड͚ΔԸܙ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO w ଟ͘ͷ৔߹ɺ/FUXPSLMBUFODZΑΓ΋ૣ͘൓Ԡ͢Δ͜ ͱ͕Ͱ͖Δ w ྫ͑͹ΞϓϦશମΛΩϟογϡͤͨ͞৔߹ɺ/FUXPSL ʹΞΫηε͢Δඞཁ͢Βͳ͍ w Ωϟογϡίϯςϯπ͕ଘࡏ͢Δ৔߹ɺҰ౓Ωϟογϡ Λද্ࣔͨ͠ͰɺόοΫάϥ΢ϯυͰ࠷৽ͷ৘ใΛऔ
ಘ͢Δ౳ͷॊೈͳରԠ΋Մೳ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO w +BWB4DSJQUΛ࢖༻͢Δ·Ͱʹ͸ɺύʔεɺίϯύΠϧɺ ࣮ߦɺͱز͔ͭͷϑΣʔζ͕ඞཁ w ͜ΕΒͷϑΣʔζʹֻ͕͔࣌ؒͬͯ͠·͏͜ͱ͕͋Δ w 7ͷΑ͏ͳΤϯδϯͰ͸εΫϦϓτΛόΠτίʔυ ͱͯ͠อଘ͢Δ͜ͱͰ࠷దԽΛਤ͍ͬͯΔ ଞʹ΋ʜ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ஫ҙ͠ͳ͚Ε͹͍͚ͳ͍ͷ͸ɺ ԸܙΛड͚Δʹ͸τϨʔυΦϑ͕͋Δ͜ͱΛ ཧղ͢Δ͜ͱɻ ࢧ෷͏ίετΛ࠷খݶʹͭͭ͠ɺ ԸܙΛ࠷େԽ͢Δඞཁ͕͋Δɻ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ۩ମతʹͲͷΑ͏ͳίετʹ ஫ҙ͢΂͖͔ʁ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO w 4FSWJDF8PSLFSͷىಈ࣌ؒ w ΩϟογϡͷಡΈࠐΈ࣌ؒ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO w 4FSWJDF8PSLFSͷىಈ࣌ؒ w ΩϟογϡͷಡΈࠐΈ࣌ؒ ຊεϥΠυͰ͸ͪ͜Βʹ஫໨

DISPNFEFWTVNNJUCSJFpOHTFTTJPO w 4FSWJDF8PSLFSͷىಈ͕࣌ؒ࠷΋ݟա͝͞Ε΍͍͢ w ͲΕ͘Β͍ͷ͕࣌ؒফඅ͞ΕΔ͔͸ϢʔβͷσόΠε ʹґଘͯ͠͠·͏ʜ w ͔͠͠6TFS5JNJOH"1*Ͱܭଌ͢Δ͜ͱ͕Մೳ w QIJMJQXBMUPODPNͰ͸
w σεΫτοϓNT w ϞόΠϧ NT NT΋͋Γ͑Δ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 4FSWJDF8PSLFSΛ࢖༻͠ͳ͕Β αΠτΛߴ଎ʹಈ࡞ͤ͞Δʹ͸ Ͳ͏͢Ε͹Α͍͔ʁ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO લఏͱͯ͠3FRVFTUʹ͸ͭͷछྨ͕͋Δ w /BWJHBUJPOSFRVFTUT w 8FCϖʔδࣗମͷ3FRVFTU w Ωϟογϡ͕೉͍͠ w ͔͠͠ɺύϑΥʔϚϯε΁ͷΠϯύΫτ͕Ͱ͔͍
w 3FTPVSDFSFRVFTUT w 8FCϖʔδ಺ʹࢀর͞ΕΔΞηοτͷ3FRVFTU w +BWB4DSJQUɺ$44ɺ*NBHFT౳ w Ωϟογϡ͕༰қͰར༻ྫ΋ଟ͍

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Ωϟογϡ੍ޚ͸೉͍͠΋ͷͷɺ ޮՌͷߴ͍/BWJHBUJPOSFRVFTUTͷ ࠷దԽΛߦ͏ͷ͕ྑͦ͞͏

DISPNFEFWTVNNJUCSJFpOHTFTTJPO /BWJHBUJPOSFRVFTUTͷ࠷దԽΛਤΔ w Ωϟογϡ͔Β͙͢ʹίϯςϯπΛฦ͢ w 8PSLCPYΛ࢖͏ͱ؆୯ʹಋೖͰ͖Δ w XPSLCPYTUSBUFHJFTDBDIF'JSTU w
XPSLCPYTUSBUFHJFTTUBMF8IJMF3FWBMJEBUF w ΩϟογϡΛฦ٫ͨ͋͠ͱʹɺόοΫάϥ΢ϯυͰ࠷ ৽ͷϦιʔεΛऔಘ͢ΔΑ͏ʹ͢Δ

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༏ઌ͔ͷΩϟογϡઓུΛॊೈʹ૊Ή͜ͱ͕ॏཁ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ଞʹ΋/BWJHBUJPO1SFMPBEΛ࢖༻ͯ͠ 4FSWJDF8PSLFSͷىಈͱ/BWJHBUJPOSFRVFTUTΛฒྻ Ͱ࣮ߦ͢Δ͜ͱͰɺίετΛ࠷খԽͰ͖Δ IUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTOBWJHBUJPOQSFMPBE IUUQTCMPHKYDLJPFOUSJFTOBWJHBUJPOQSFMPBEIUNM

DISPNFEFWTVNNJUCSJFpOHTFTTJPO $BDIJOHTUSBUFHZ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Ωϟογϡ؅ཧ w ద੾ͳϦιʔεΛద੾ͳλΠϛϯάͰอଘ͢Δ w 4UPSBHFͷ༰ྔ͸༗ݶͰ͋Δ͜ͱΛߟྀ͢Δ w 2VPUBΛ௒͑ͳ͍Α͏ʹ੍ޚ͢Δ w ޮ཰తͳߋ৽Λ͢Δඞཁ͕͋Δ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ίϯςϯπͷ಺༰ʹΑΔΩϟογϡઓུ w αʔϏεʹͱͬͯॏཁͳίϯςϯπ DSJUJDBM w ࠷ॏཁͰ͸ͳ͍ίϯςϯπ OPODSJUJDBM
w ͜ΕΒͷଐੑʹΑͬͯઓུΛ෼͚Δͷ͕ޮՌత

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 1SFDBDIJOH DSJUJDBM w ϝϦοτ w ࣮૷ͱ੍ޚɺߋ৽͕ൺֱత༰қ w αΠζ΋طʹ෼͔͍ͬͯΔ΋ͷ͕΄ͱΜͲ w
σϝϦοτ w ೚ҙͷλΠϛϯάͰΩϟογϡ੍ޚ͕ඞཁ w ઌߦͯ͠/FUXPSLίετ͕ඞཁ w ࣮ࡍʹ͸ෆඞཁͳ63-ΛΩϟογϡͯ͠͠·͏ Մೳੑ͕͋Δ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 3VOUJNFDBDIJOH OPODSJUJDBM w ϝϦοτ w औಘࡁΈը૾ɺΤϯτϦϙΠϯτʹԠͨ͡Ωϟογϡ ౳ʹద͍ͯ͠Δ w σϝϦοτ
w Ωϟογϡͷ੔߹ੑ୲อ͕೉͍͠ w ίϯςϯπϋογϡ΍ɺ3FWJTJPOɺϑΝΠϧ໊ͷ޻ ෉Ͱճආ w Ωϟογϡ͕ͲΜͲΜ૿͑ͯ͠·͏ ͭ·ΓαΠζ ͕ෆఆ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO const { usage, quota } = await navigator.storage.estimate(); 4UPSBHF.BOBHFS"1*Λ࢖੍ͬͨޚ
2VPUBΛ௒͑ͳ͍Α͏ʹ੍ޚΛ͢Δ͜ͱ͕ग़དྷΔɻ 8PSLCPYͷ&YQJSBUJPO1MVHJOΛ࢖͏͜ͱͰ؆୯ʹ࢖༻͢Δ͜ͱ΋ग़དྷΔɻ IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTXPSLCPYSFGFSFODFEPDTMBUFTUXPSLCPYFYQJSBUJPO1MVHJO

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Ϣʔβ΁ͷ഑ྀΛ๨Εͣʹ w ଟ͘ͷ։ൃऀ͸ܙ·Εͨ௨৴؀ڥʹ͍Δ w 4MPX(ΤϛϡϨʔγϣϯͰಈ࡞Λ֬ೝ͢Δ w 3FRVFTU)FBEFSʹೖͬͨA4BWF%BUBAʹΑͬͯ Ωϟογϡͷಈ࡞Λ੾Γସ͑Δ w
༨ܭͳσʔλΛϢʔβଆʹอ࣋ͤ͞ͳ͍

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ൃੜ͠ಘΔτϨʔυΦϑΛॆ෼ʹཧղͯ͠ ͦΕΒΛߟྀͨ͠࢖༻Λߦ͍ͬͯ͘͜ͱ͕ॏཁɻ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 8FC"TTFNCMZͱεϨουͷ࢖༻ 6TJOH8FC"TTFNCMZBOE 5ISFBET

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 8FC"TTFNCMZͱ͸

DISPNFEFWTVNNJUCSJFpOHTFTTJPO w 8FCͷͨΊͷ৽͍͠ݴޠ w ͨͩ͠ɺ8FCҎ֎Ͱ΋׆༻Ͱ͖ΔΑ͏ͳॊೈੑ΋ w +BWB4DSJQUΛஔ͖׵͑ΔΑ͏ͳ΋ͷͰ͸ͳ͍ w ผͷݴޠ͔ΒίϯύΠϧ͞ΕΔ w
ߴ͍৴པੑɺߴ͍ύϑΥʔϚϯεΛఏڙͰ͖ΔՄೳੑ ͕͋Δ w ೥Ҏ্લʹ+BWB4DSJQU͕஀ੜͯ͠Ҏདྷɺϝδϟʔϒ ϥ΢βͰͪΌΜͱαϙʔτ͞ΕΔॳΊͯͷݴޠ w ϙʔλϏϦςΟʹ΋༏Ε͍ͯͯɺ$ Ͱॻ͔Εͨίʔ υͳͲΛ׆༻͢Δ͜ͱ͕Ͱ͖Δ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Ϣʔεέʔε w ߴ͍৴པੑɺߴ͍ύϑΥʔϚϯε͕ఏڙ͞ΕΔ͜ͱͰɺ ༷ʑͳϢʔεέʔε8FCͰରԠ͢Δ͜ͱ͕Ͱ͖ΔΑ ͏ʹͳΔ w ಈըฤू w ίʔσοΫ
w Ի੠ॲཧ w ΑΓෳࡶͳΞϓϦέʔγϣϯ w FUDʜ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ڈ೥औΓ૊Μͩ৽ػೳ w 4PVSDF.BQT w σόοάʹ͸ෆՄܽʂ w #SFBLQPJOUͷઃఆ౳΋Մೳ w 4USFBNJOH$PNQJMBUJPO
w ͜Ε·Ͱ͸Ϟδϡʔϧશମ͕ಡΈࠐ·ΕΔ·Ͱ࣮ ߦΛ଴ػ͢Δඞཁ͕͋ͬͨ w μ΢ϯϩʔυͱ࣮ߦΛಉ࣌ʹߦ͑ΔΑ͏ʹ

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

DISPNFEFWTVNNJUCSJFpOHTFTTJPO -JGUP⒎DPNQJMFS w 7Ͱ͸ىಈ࣌ؒΛߋʹ࠷దԽ͢ΔͨΊɺ-JGUP⒎ͱ͍͏ϕʔ εϥΠϯίϯύΠϥΛ࡞੒ w 8FC"TTFNCMZͷόΠτίʔυΛड͚औΓɺ͙͢ʹ࣮ߦΛ ։࢝ w ͦͷޙɺ8FC"TTFNCMZNPEVMF͸.BJOUISFBE͔Βऔ
Γআ͔Εɺ5VSCP'BOʹΑͬͯ͞ΒͳΔ࠷దԽ͕ࢪ͞ΕΔ w ࠷దԽ͕׬ྃ͢ΔͱɺಛผͳࢦࣔΛग़ͣ͞ͱ΋௚઀ϗοτ εϫοϓ͞ΕΔ w ͭ·Γʜ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO w ߴ଎ىಈ༻ϕʔεϥΠϯίϯύΠϥͱͯ͠ͷ-JGUP⒎ w ࠷େݶύϑΥʔϚϯεΛൃش͢ΔͨΊͷ  ࠷దԽίϯύΠϥ5VSCP'BOͱ͍͏ߏ੒ʹ -JGUP⒎DPNQJMFSIUUQTWEFWCMPHMJGUP⒎ 'VSCP'BOPQUJNJ[BUJPODPNQJMFSIUUQTWEFWEPDTUVSCPGBO

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ࠓ೥ͷ৽ػೳ8FC"TTFNCMZ5ISFBET w ߴ଎͔ͭฒྻԽ͞Εͨίʔυ͕࣮ߦͰ͖Δ w 1UISFBET౳ͷεϨουΛ࢖༻ͨ͠ίʔυΛ8FCʹ࣋ ͪࠐΊΔΑ͏ʹʜʂ w ເͷ͋Δػೳ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 8FC"TTFNCMZ5ISFBET

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 8FC"TTFNCMZ5ISFBETͷϝϦοτ w σεΫτοϓʹݶΒͣɺJ04΍"OESPJEͷ୺຤Ͱෳ਺ ͷίΞΛ࣋ͭ୺຤͕౰ͨΓલ w ௨ৗͷ8FC"QQMJDBUJPOͳΒͭͷίΞͷΈΛ࢖༻͢ Δ w .BJOUISFBEͱ8FC8PSLFSΛ࢖༻ͯ͠΋ίΞ
w 8FC"TTFNCMZ5ISFBETΛ࢖༻͢Δ͜ͱͰΑΓଟ͘ͷ ίΞΛ׆༻͢Δ͜ͱ͕Ͱ͖Δ w ୺຤ͷੑೳΛϑϧʹ׆༻͢Δ͜ͱͰɺϢʔβମݧͷ޲ ্͕ظ଴Ͱ͖Δ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ௨ৗͷ8PSLFSͱͷҧ͍ w +BWB4DSJQU͔Β௨ৗ࡞੒͞ΕΔ8PSLFSͰ͸7ͷΠ ϯελϯε͕8PSLFSͷ਺͚ͩੜ੒͞ΕɺϝϞϦ࢖༻ ཰্͕͕ͬͯ͠·͏ ඇྗͳ୺຤Ͱಛʹෆར w 8FC"TTFNCMZ5ISFBET͔Β࡞੒͢Δ৔߹͸ɺ
4IBSFE"SSBZ#V⒎FSΛհͯ͠ϝϞϦঢ়ଶΛڞ༗͢Δͨ Ίߴޮ཰ͳՔಇ͕ݟࠐΊΔ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ࣮ྫΛ؆୯ʹ঺հ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 4LFUDI6Q w %ϞσϦϯάιϑτ΢ΣΞ w %FTLUPQ"QQ .PCJMF J04 "OESPJE ͷڞ௨Ͱ࢖༻
͞Ε͍ͯΔ$ ͷίʔυΛ&NTDSJQUFOͰίϯύΠ ϧͯ͠ྲྀ༻ w ࠷ॳͷҠߦ࡞ۀͰ͸ਓͷΤϯδχΞ͔͍͠ͳ͔ͬͨ ͕ɺϲ݄Ͱ࡞ۀΛऴ͑Δ͜ͱ͕Ͱ͖ͨʂ w ಉ࣌ظʹ4VCTDSJQUJPOϞσϧΛެ։ɺϲ݄ͷؒͰސ ٬ϕʔεΛ૿΍͢͜ͱʹ੒ޭ IUUQTXXXTLFUDIVQDPN

DISPNFEFWTVNNJUCSJFpOHTFTTJPO (PPHMF&BSUI w օ͞Μ͝ଘ஌ͷΞϓϦέʔγϣϯ w .VMUJUISFBEͰಈ࡞͢Δ8FC"TTFNCMZΛಋೖ w Ճ͑ͯɺલड़ͷ.VMUJUISFBEʹରԠͨ͠Ϗϧυ͕ $ISPNFͱ'JSFGPYͰಈ࡞͢Δʂ w
4JOHMFUISFBEͳ8FC"TTFNCMZͷ࣮૷ͱൺֱͯ͠ɺ ฏۉ'14ίϚམͪ KBOL Λఔվળ͢Δ͜ͱʹ ੒ޭͨ͠ IUUQTXXXHPPHMFDPNFBSUI

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

DISPNFEFWTVNNJUCSJFpOHTFTTJPO αʔϏε։ൃͷ৔໘Ͱ͸ɺͦΕ΄ͲඞཁͱͳΔέʔε͸ ଟ͘ͳ͍͔΋͠Εͳ͍ɻ ͔͠͠ɺαʔϏεཁ݅ͱͯ͠ߴ͍ύϑΥʔϚϯεΛٻΊ ΒΕͨ৔߹ʹɺରॲͰ͖ΔΑ͏Ҿ͖ग़͠ͱ͓ͯ࣋ͬͯ͠ ͖͍ͨɻ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO Ԡ౴ੑΛอূ͢ΔͨΊͷऔΓ૊Έɿ .BJO5ISFBEͷεέδϡʔϦϯά "2VFTUUP(VBSBOUFF 3FTQPOTJWFOFTT4DIFEVMJOH 0OBOE0⒎UIF.BJO5ISFBE

DISPNFEFWTVNNJUCSJFpOHTFTTJPO .BJOUISFBE6*UISFBEͷࠅ࢖ʹؔ͢Δ໰୊ w ೖྗʹର͢Δॲཧ͕࣮ߦ͞Ε͍ͯΔؒʹɺଓ͚ͯೖྗ Λड͚෇͚Δͱʜ w ࠷ॳͷೖྗʹର͢Δॲཧ͕׬͍ྃͯ͠ͳ͍ͨΊɺ࠷ޙ ͷೖྗʹର͢ΔϨεϙϯε͕஗Ԇͯ͠͠·͏ w ͜Ε͸.BJOUISFBEͷϒϩοΩϯά͕ൃੜ͍ͯ͠Δ
ঢ়ଶ ஗Ԇͨ͠ॲཧ͸RVFVFʹ٧·Δ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ରࡦͱͯ͠༏ઌ౓ʹԠͨ͡λεΫ෼͚ w λεΫ͸ͭʹ෼ྨ͞ΕΔ w VTFSCMPDLJOHUBTLT w ࣮૷ऴྃ·Ͱʹ࣌ؒత੍໿͕͋Δॲཧ w EFGBVMUUBTLT
w Ϣʔβʹݟ͑Δॲཧ w JEMFUBTLT w Ϣʔβʹݟ͑ͳ͍ॲཧ CBDLVQ΍BOBMZUJDTͳͲ w ͦΕͧΕS"'TFU5JNFPVUSFRVFTU*EMF$BMMCBDLͰͰ͖Δ͚Ͳ TFU5JNFPVU͸গ͠ෆ҆ఆͳͷͰઐ༻"1*͕ඞཁ w ΋ͬͱঢ়ଶΛίϯτϩʔϧͰ͖ΔΑ͏ʹ͢ΔͨΊʹ"1*Λ௥Ճ͢Δ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO .BJOUISFBE4DIFEVMJOH"1* IUUQTHJUIVCDPNTQBOJDLFSNBJOUISFBETDIFEVMJOH w 3FBDU౳ͷϑϨʔϜϫʔΫͰ͸TDIFEVMFSΛࣗલͰ࣋ͬ ͍ͯΔ w ͦΕΒ͕ϒϥ΢βͷϏϧτΠϯͰఏڙͰ͖ͨΒྑͦ͞ ͏ w
ఏҊ͸·࣮ͩݧஈ֊ͳͷͰϑΟʔυόοΫΛઈࢍड෇

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 0⒎UIF.BJO5ISFBE w લड़ͨ͠Α͏ͳλεΫͷ༏ઌ౓Λઃ͚Δ͚ͩͰ͸ɺෆ े෼ͳέʔε͕Ͳ͏ͯ͠΋Ͱͯ͘Δ w ରࡦͱͯ͠ɺͦΕΒΛ8FC8PSLFSΛ࢖͍ #BDLHSPVOEUISFBEʹಀ͕͢ w $"%ɺήʔϜɺΤϯίʔυɺػցֶशɺ҉߸Խɺ 
ͦͷଞʹ΋༷ʑͳϢʔεέʔε͕ଘࡏ͢Δ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ໰୊఺ w QPTU.FTTBHFͳͲͷϝοηʔδϕʔεͰ  MPXMFWFMͳ"1*͕࢖ΘΕ͍ͯΔ w ϝοηʔδͷ΍ΓऔΓͰൃੜ͢Δ4FSJBMJ[BUJPO %FTFSJBMJ[BUJPOͷίετ͸ͦΕͳΓʹߴ͍ w ͜ͷҰ࿈ͷྲྀΕΛUISFBEIPQͱݺͿ
w ϝϞϦϦʔΫɺεϨουͷ؅ཧΛखಈͰߦ͏ඞཁ͕͋ Δ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO ͜ΕΒͷ໰୊Λղফ͢ΔͨΊʹ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO r+BTPO.JMMFS “we need a higher level API.”

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 5BTL8PSLMFU IUUQTHJUIVCDPNEFWFMPQJUUBTLXPSLMFU w ϝοηʔδϕʔεͰ͸ͳ͘ɺλεΫϕʔε w "OESPJE J04ͳͲଞͷ1MBUGPSNΛࢀߟʹߟ͑ΒΕͨ w ֤λεΫͷ࿈࠯Λߟྀ͠ɺεϨουΛݡ͘࢖͏͜ͱͰ
UISFBEIPQͷίετΛ࠷খԽ͢Δ w ྫ͑͹ɺλεΫΛॲཧ͢ΔͷʹUISFBEIPQඞཁͩͬ ͨ΋ͷ͕ɺUISFBEIPQͰࡁΉ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 8FC8PSLFSTͷ࢖͍ॴ w ࢖͏΂͖ w ௕͍ϒϩοΩϯά͕ൃੜͦ͠͏ͳॲཧ w ೖग़ྗͷখ͞ͳॲཧ w 3FRVFTU3FTQPOTFʹै͏৔߹
w ࢖Θͳ͍΂͖ w %0.΁ͷґଘ͕͋Δ৔߹ w ೖྗ΁ͷԠ౴ॲཧ w খ͞ͳ஗ԆͰϨεϙϯεΛฦ͢ඞཁ͕͋Δ৔߹

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 8FC8PSLFSTͳͲɺ#BDLHSPVOEUISFBEʹॲཧΛಀ͕ ͢͜ͱͰɺ'14͸վળ͞ΕΔɻ ͔͠͠ɺUISFBEIPQʹίετֻ͕͔Δ͜ͱΛҙ͍ࣝͯ͠ ͳ͍ͱೖྗ΁ͷԠ౴ੑ JOQVUMBUFODZ ͕௿Լͯ͠͠· ͏఺ʹ஫ҙ͕ඞཁʂ

DISPNFEFWTVNNJUCSJFpOHTFTTJPO 5IBOLZPV

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

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

More Decks by tsuyoshi wada

Other Decks in Programming

Featured

Transcript

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

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