Web Frontend Performance Tuning TIPS *n

1FSGPSNBODF 5VOJOH5*14 O 'SPOUSFOEJO'VLVPLB "ZVNV4BUP!BIPNV ! GSPOUSFOE@GGB

ࠤ౻า ͞ͱ͏ ͋ΏΉ

ϋϯυϧωʔϜ BIPNV !

IUUQBIPNV ڵຯ΋ͬͯͩͬͨ͘͞Βθώ

ຊ୊

1BHF4QFFE PS :4MPX ීஈɺݟͯΔํʁ

͋Δ੍࡞ͱ͓٬͞Μͱ ͔͍͍ͬ͜αΠτ

" # ௒͔͍͍ͬ͜ αΠτͭ͘ΕͨΘʔ ! ͓٬͞Μ΋େຬ଍ͩΘʔ ੍࡞ऀ

$ # ࠓɺग़ઌͳΜͰ͚͢Ͳ αΠτ։͚ͳ͘ͳ͍Ͱ͔͢ʁ ͓٬͔Βి࿩

" # ͋Εʔ ΅͘ͷ1$Ͱ͸։͚·͢Αʁ ! ͍΍͊ɺ͔͍͍ͬ͜ͳ͊ ੍࡞ऀ

$ # ͦ͏Ͱ͔͢ ! ͱ͜ΖͰίϯόʔδϣϯ ্͕Βͳ͍ΜͰ͚͢Ͳ ͳΜͱ͔ͳΓ·ͤΜʁ ͓٬͔Βి࿩

" # ͑ʔɺࠔͬͨͳ͊ ! ͡Ό͋΋ͬͱ ը૾ͱ͔࢖ͬͯ ͔ͬ͜Α͘͠·͠ΐ͏ ੍࡞ऀ

$ # Θ͔Γ·ͨ͠ ! ɾɾɾ ͓٬͔Βి࿩

ϞόΠϧͰॏͯ͘։͚ͳ͍ ։͍ͯ΋εΫϩʔϧ͕ॏ͍ɾΧΫΧΫ Ϣʔβʔʹ཭୤͞Εͯ͠·͏ ίϯόʔδϣϯʹࢸΒͳ͍

ʊਓਓਓਓਓਓਓਓਓʊ ʼɹಥવͷܖ໿ऴྃɹʻ ʉ:?:?:?:?:?:?:?:ʉ

ͦ͏ͳΒͳ͍ͨΊʹ ஌͓͖͍ͬͯͨ5*14Λ ঺հ͠·͢

ύϑΥʔϚϯεͷಈػ ߟ͑ํͱಋೖ 5JQT O ωοτϫʔΫίετ ϨϯμϦϯά εΫϦϓτॲཧ ΠϯλϥΫγϣϯ ·ͱΊ

*OUSPEVDUJPO ߟ͑ํͱಋೖ

'SPOUFOE 1FSGPSNBODF ϑϩϯτΤϯυͱύϑΥʔϚϯεͷؔ܎

IUUQXXXTUFWFTPVEFSTDPNCMPHUIFQFSGPSNBODFHPMEFOSVMF

4UFWF 4PVEFST ʠ PG UIF FOEVTFS SFTQPOTF UJNF JT TQFOU
PO UIF GSPOUFOEʡ

▻▻▻▻▻ & ' #BDLFOE %# 8FC"QQ ( ) 'SPOUFOE #SPXTFS
* )5.-

& ' #BDLFOE %# 8FC"QQ ( ) 'SPOUFOE #SPXTFS *
)5.- MJOLISFGGPPDTTʜ TDSJQUTSDCBSKTʜ JNHTSDRVYKQHʜ

)5.- ◅◅◅◅◅ (&5GPPDTT (&5CBSKT (&5RVYKQH ◅◅◅◅◅ ◅◅◅◅◅

)5.- ▻▻▻▻▻ ▻▻▻▻▻ ▻▻▻▻▻ * $44 * +4 , +1(

)5.- ▻▻▻▻▻ ▻▻▻▻▻ ▻▻▻▻▻ * $44 * +4 , +1( ϑϩϯτΤϯυͷ੹೚

Ћ ΋͏ͻͱͭŋŋŋ

*OUFSBDUJPO69 ϢʔβʔͱΠϯλʔϑΣʔεͷର࿩

εΫϩʔϧ͕஗͍ ΧΫΧΫ͢ΔαΠτ ␡

ϘλϯΛԡͯ͠΋ ൓Ԡ͕ͳ͍αΠτ ␡

ݟӫ͑͢Δ͚Ͳ ΠϥΠϥ͢ΔαΠτ ␡

࢖༻ײɾ৺஍Α͞΋ ޿ٛͷύϑΥʔϚϯε ✓

ϑϩϯτͷ޻෉Ͱ վળͰ͖Δ͜ͱ͸͢Δ ✓

5*14ΛूΊͨཧ༝

IUUQTEFWFMPQFSTHPPHMFDPNTQFFEEPDTJOTJHIUTSVMFT

IUUQEFWFMPQFSZBIPPDPNQFSGPSNBODFSVMFTIUNM

͙͢ʹ࢖͑ͯ ཁ఺Λ͓͑͞΍͍͢

5*14ˠཧ༝Λ஌Δ

࣌ͱ৔߹ʹΑͬͯ ൑அͰ͖ΔΑ͏ʹ͢Δ

/FUXPSLJOH O ωοτϫʔΫίετ

3FEVDF 3FRVFTUT4J[F ϦΫΤετͷ਺ͱϑΝΠϧαΠζΛݮΒ͢

"CPWFUIFGPME ϑΝʔετϏϡʔΛ଎͘ݟͤΔ

✓ ❓ ⚠ ը૾Ϧιʔε͸ඞͣ ࠷దԽͯ͠αΠζΛ཈͑Δ ը࣭Λอͪͳ͕ΒσʔλαΠζͷѹॖޮ཰Λ ߴΊͨΓɺ༨෼ͳ৘ใΛ࡟আͨ͠Γ͢Δ ! ! ௿ίετɾߴϦλʔϯͳରࡦͳͷͰ
͜Ε͕΍Εͯͳ͍ͱɺ͔ͳΓϞολΠͳ͍

✓ ❓ ⚠ ςΩετϦιʔεʹ͸ ࠷খԽΛద༻͢Δ ͍ΘΏΔ.JOJGZॲཧɹεϖʔε΍վߦͳͲΛ औΓআ͍ͯɺϑΝΠϧαΠζΛখ͘͢͞Δ ! ! ߋ৽͢ΔͨͼʹखಈͰ΍Βͳ͍
ඞͣπʔϧΛ࢖ͬͯࣗಈԽ͢Δ

IUUQBMQIBQJYFMTDPNQSFQSPT

IUUQJODJEFOUDPNDPEFLJU

IUUQHSVOUKTDPN

✓ ❓ ⚠ $444QSJUFTͱ %BUB63*Λ༗ޮʹ࢖͏ ը૾Λຕʹ·ͱΊͨΓɺ$44ͷதʹจࣈྻͰ ຒΊࠐΉ͜ͱͰɺϦΫΤετ਺Λઅ໿Ͱ͖Δ ! ! ໨҆,#Ҏ಺Ͱ͓͞·ΔΑ͏ʹͯ͠
ͻͱͭͷϑΝΠϧΛେ͖͗͘͢͠ͳ͍Α͏஫ҙ

%BUB63* $444QSJUFT , , , , ,, ,,, , ,
, , , , , , , , , , , , , , * $44 , , , , , , div { width: 100px; height: 50px; border-radius: 3px; … .. .

⬅ όΠφϦσʔλΛ จࣈྻͱͯ͠ຒΊࠐΉ * $44 background-image: url(“data:image/ jpeg;base64,/9j4AAQSkZJRgABAQAA AQABAAD2wBDAAMCAggICAgICAgI CAgICAgICAgICAgICAgICAgICAgICA
gICAgICAgICAgICAoICAgICQoKCAg MDAoIDAgICQj2wBDAQMEBAYFBgo GBgoNDAwNDQ0NDQwMDQ0MDA0 MDQ0MDAwMDQwMDAwMDAwMDA wMDAwMDAwMDAwMDAwMDAwMD AwMDAzwAARCADIAMgDAREAAhEB AxEB8QAHQAAAgEFAQEAAAAAAAA AAAAAAQIAAwQFBgcICfEAEUQAAIB AgMEBwMJBgUDBQAAAAECAAMRB BIhBQYxQQcIE1FhcZEiMoEjQlJicqGx wfAUM4KissIVNFPR8WOSoyRDc4Ph8 QAGwEAAgIDAQAAAAAAAAAAAAAA AAECAwQFBgf/xAAvEQACAgEEAg…

΋͠.#΋͋Δͱʜ .#ಡΈࠐ·ΕΔ·Ͱ ελΠϧ͕ద༻͞Εͳ͍ %BUB63*ͷը૾΋දࣔ͞Εͳ͍ ʘ ?P? ʗ * $44 ,
, , , , , div { width: 100px; height: 50px; border-radius: 3px; … .. .

✓ ❓ ⚠ ͢΂ͯͷը૾Λ3FUJOB޲͚ʹ YͰ༻ҙ͠ͳͯ͘΋Α͍ େ͖͘ݟͤͳ͍͍ͯ͘αϜωΠϧը૾͸ ͦ΋ͦ΋YͰे෼ͳ͜ͱ͕ଟ͍ ! ! ςΩετը૾΍ΩʔϏδϡΞϧ͸
͕͢͞ʹY͡Όͳ͍ͱਏ͍

✓ ❓ ⚠ &YQJSFTͳͲͷϔομʔͱ H[JQѹॖΛඞͣద༻͢Δ &YQJSFTϔομʔͰΩϟογϡΛ׆༻ͯ͠ H[JQͷઃఆͰసૹྔΛ͓͑͞Δ ! ! ඇৗʹॳาత͕ͩɺݟಀͯ͠͠·͏ͱ
μϝʔδ͕େ͖͍ͷͰඞͣνΣοΫ͍ͨ͠

IUUQEFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFEJOTJHIUT

XXXHPPHMFDPNBOBMZUJDT

IUUQXXXXFCQBHFUFTUPSH

3FOEFSJOH O ϨϯμϦϯά

"WPJE$PNQMFYJUJFT ෳࡶʹ͠ͳ͍

✓ ❓ ⚠ ϨΠΞ΢τɾ࠶഑ஔ͕ ஗Εͯൃੜ͠ͳ͍Α͏ʹ͢Δ Ϩεϙϯγϒͳը૾΋ղ૾౓͝ͱʹ IFJHIU͚ͩͰ΋ܾΊΕ͹ΨίͬͯͳΒͳ͍ ! ! ྫ͑͹JNHͷXJEUI
IFJHIU͕ͳ͍ͱ ը૾ಡΈࠐΈ࣌ʹΨΫͬͱͳͬͯ͠·͏

✓ ❓ ⚠ ߴίετͳ$44͸ ৻ॏʹऔΓѻ͏ CPYTIBEPX΍CPSEFSSBEJVTͳͲͷ ͍ΘΏΔ$44͸ඳըίετ͕௿͘ͳ͍ ! ! ૊Έ߹ΘͤΔͱɺඳըύε͕ෳࡶʹͳΔͷͰ
ಛʹඳըύϑΥʔϚϯε͕ྼԽ͠΍͍͢

# ͜ΕΛͷ ج४ͱ͢Δ

✓ ❓ ⚠ (16ΞΫηϥϨʔγϣϯ͕ ద༻͞ΕΔ$44Λར༻͢Δ USBOTMBUFEͳͲ(16ΞΫηϥϨʔγϣϯ͕ ద༻͞ΕΔ$44Λ࢖͏ͱ׈Β͔ʹಈ͘ ! ! ͓·͡ͳ͍ͱͯ͠࢖͍͗͢Δͱ
Ωπ͍ͬ͠΃ฦ͕͋͠Δ

IUUQTEFWFMPQFSTHPPHMFDPNFWFOUTJPTFTTJPOT

$PNQPTJUJOH-BZFS PO(16 /PSNBM-BZFS FWFSZ$16

(165FYUVSF # ߋ৽͕͋Ε͹ ඳըσʔλΛ (16ʹ࠶సૹ # ඳըσʔλΛ Ωʔϓ͠ͱ͍ͯ (16্Ͱ߹੒

◅ ◅ ◅ # ޿͍ൣғΛ ࠶ඳը͠ͳ͍͔Β εϜʔζ # ϨΠϠʔؙ͝ͱΛ ૢ࡞ͤ͞Δ͚ͩͰ
αΫαΫҠಈ

4DSJQUJOH O εΫϦϓτॲཧ

5IJOL $PNQVUJOH ϒϥ΢βͷؾ࣋ͪʹͳͬͯॻ͘

✓ ❓ ⚠ K2VFSZͷηϨΫλΛ ͖ͪΜͱΩϟογϡ͢Δ K2VFSZʹηϨΫλΛ౉ͯ͠ཁૉΛબ୒͢Δͱ͖ ୳ࡧ݁ՌΛฦ͢ͷͰɺͦΕΛΩϟογϡ͢Δ ! ! Ωϟογϡ͠ͳ͍ͱɺຖճηϨΫλΛ૸Βͤͯ
ཁૉΛ୳ࡧ͍ͯ͠Δ͜ͱʹͳͬͯ͠·͏

! $(‘#list’).append(‘<li>Item1</li>’); $(‘#list’).append(‘<li>Item2</li>’); $(‘#list’).append(‘<li>Item3</li>’); $(‘#list’).append(‘<li>Item4</li>’); $(‘#list’).append(‘<li>Item5</li>’); ! <ul id=“list”></ul>

var $list = $(‘#list’); $list.append(‘<li>Item1</li>’); $list.append(‘<li>Item2</li>’); $list.append(‘<li>Item3</li>’); $list.append(‘<li>Item4</li>’); $list.append(‘<li>Item5</li>’); !
<ul id=“list”></ul>

var $list = $(‘#list’); // ͪΐͬͱۃ୺Ͱ͕͢… $list.append(‘<li>Item1</li>’ + ’<li>Item2</li>’ +
‘<li>Item3</li>’ + ‘<li>Item4</li>’ + ‘<li>Item5</li>’); ! <ul id=“list”></ul>

✓ ❓ ⚠ Πϕϯτ͸%FMFHBUFΛ ࢖ͬͯ·ͱΊΔ ୔ࢁ͋Δɾಈతʹ૿͑ΔՄೳੑ͕͋Δཁૉ΁ͷ Πϕϯτ͸ɺ%FMFHBUF ҕৡ Λ࢖͏ !
਺ඦηϧ͋ΔΤΫηϧ෩ͳϑϩϯτ࣮૷Λ૝૾ʜ

// ͨ͘͞Μͷ TD ΁ɺݸผʹΠϕϯτΛషΔ $(‘table td’).on(‘click’, function() { // do
something }); ! // ͻͱͭͷ table ʹΠϕϯτΛషΔ $(‘table’).on(‘click’, ‘td’, function() { // do something });

// ͨ͘͞Μͷ TD ΁ɺݸผʹΠϕϯτΛషΔ $(‘table td’).on(‘click’, function() { // do
something }); ! ! <table> <tr> <td>ηϧ1</td> <td>ηϧ2</td> <td>ηϧ3</td> </tr> </table> # 2

// ͻͱͭͷ TABLE ʹΠϕϯτΛషΔ $(‘table’).on(‘click’, ‘td’, function() { // do
something }); ! ! <table> <tr> <td>ηϧ1</td> <td>ηϧ2</td> <td>ηϧ3</td> <tr> </table> # ! 2

✓ ❓ ⚠ TDSPMM SFTJ[FͷΠϕϯτΛ ؒҾ͍ͯॲཧ͢Δ UISPUUMF ɹ࿈ଓݺͼग़͠ΛOϛϦඵͷपظʹؒҾ͍࣮ͯߦ ! EFCPVODF
ɹOϛϦඵҎ಺ͷ࿈ଓݺͼग़͠Λແࢹͯ͠ ɹݺͼग़͕͓͠͞·ͬͨΒ࣮ߦ

/* Underscore.JS */ ! // scroll ʹ߹ΘͤͯҐஔΛߋ৽͢ΔԿ͔ var throttled =
_.throttle(updatePos, 100); $(window).scroll(throttled); ! // resize ʹ൓Ԡͯ͠ϨΠΞ΢τ͠௚͢Կ͔ var lazyLayout = _.debounce(calcLayout,300); $(window).resize(lazyLayout);

UISPUUMFNT EFCPVODFNT NT͝ͱʹൃՐ͢ΔΠϕϯτ

✓ ❓ ⚠ ҙຯͷബ͍ϕϯνϚʔΫʹ ࿭Θ͞Εͳ͍ɾؾʹ͠ͳ͍ ࠣࡉ͗͢ΔύϑΥʔϚϯεΑΓ͸ ه๏ͷ౷ҰੑɾՄಡੑ͕༏ઌ͞ΕΔ΂͖ ! ! ଎͍ɾ஗͍ͷϕϯνϚʔΩϯά͸ඇৗʹେࣄ
͚ͲɺͦͷॲཧΛίʔϧ͢Δස౓Λߟ͑Δ

✓ ❓ ⚠ ϝϞϦϦʔΫͷճආ +4Τϯδϯͷ࠷దԽߟྀ <&>.*/ #SPXTFS$PNQVUJOH4USVDUVSF ! ৄ͘͠͸ɺ͜ͷ࣍ͷ࣍ͷηογϣϯͰʂ !
Ͱ΋ͪΐͬͱ͚ͩʜ

IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTQFSGPSNBODFNZTUFSZ

function updateSprites(dt) { for (var sprite in sprites) { sprite.position.x
+= 0.5 * dt; // 20 more lines of arithmetic computation. } }

function updateSprites(dt) { for (var sprite in sprites) { updateSprite(sprite,
dt); } } ! function updateSprite(sprite, dt) { sprite.position.x += 0.5 * dt; // 20 more lines of arithmetic computation. } ϧʔϓ಺ͷॲཧΛผؔ਺ʹ෼཭͢Δ͜ͱͰ ࠷దԽ͕ద༻͞ΕΔΑ͏ʹͳͬͨ Β͍͠

*OUFSBDUJPO O ΠϯλϥΫγϣϯ

JO.PCJMF ओʹϞόΠϧܥͷ࿩

✓ ❓ ⚠ ஗Ԇϩʔυ࣌ͷ ௿ղ૾౓ϓϨʔεϗϧμʔ σϑΥϧτͰαΠζٯࢉ,#ͷ௿ղ૾౓ εΫϩʔϧ஗ԆͰຊདྷͷߴղ૾౓ʹ͔͑͞͠ ! ! ωοτϫʔΫతʹϦΫΤετ਺͸΋ͪΖΜ૿͑Δ
͚ͲɺମײΛ্͛ΒΕΔͱ͜Ͱ͸࢖͏΂͖

✓ ❓ ⚠ ϩʔσΟϯάදࣔ͸ NT଴ͬͯग़͢ ͦΕҎԼͰ͋Ε͹ɺϩʔσΟϯάද͕ࣔ໌໓ͯ͠ ͠·͏͚ͩͰٯʹݟӫ͕͑ྑ͘ͳ͍ ͜͏͍͏εϐφʔܥͷ΍ͭ

var timer; ! $(document).on(‘ajaxSend’, function(){ timer = setTimeout(function() { $(‘#loading’).show();
}, 300); }); ! $(document).on(‘ajaxComplete’, function(){ clearTimeout(timer); $(‘#loading').hide(); });

✓ ❓ ⚠ λοϓ࣌ͷঢ়ଶදݱΛ పఈతʹ͚ͭΔ ϒϥ΢βඪ४ͷUBQIJHIMJHIUDPMPSͰ΋Α͍͠ UPVDITUBSU_FOEͰDMBTTΛண୤ͯ͠΋Α͍ ! ! UBQIJHIMJHIUDPMPSΛSHCB
ʹ ઃఆͨ͠··ແ൓Ԡͳ6*ʹ͢Δͷ͸࠷ѱ

// λον։࢝࣌ʹɺis-activeΫϥεΛ෇༩͢Δ $(document).on('touchstart','a',function() { $(this).addClass('is-active'); }); ! // λονऴྃ࣌ʹɺis-activeΫϥεΛղআ͢Δ $(document).on('touchend',
'a', function() { $(this).removeClass('is-active'); }); ! // ݫີʹ͸ɺUIͷछྨʹΑͬͯɺΫϥεண୤ͷͱ͖ʹ // σΟϨΠΛ͔͚ͯνϡʔχϯά͠ͳ͍ͱࣗવʹͳΒͳ͍

✓ ❓ ⚠ ը໘શମͷτϥϯδγϣϯ͸ ίεύѱ͍ͷͰආ͚Δ ΍Ε͹Ͱ͖Δ͕ɺ޿͍ൣғΛαϙʔτ͢Δʹ͸ ݕূίετɾෆ۩߹ରԠίετ͕ߴ͍ ! ! K2VFSZ.PCJMFͰ͢ΒͰ஍ຯʹͳΓ
ͷσϞ͸ߋʹফۃతͳײ͡ʹͳ͍ͬͯΔ

✓ ❓ ⚠ ϞόΠϧʹ͓͚ΔDMJDLͷ NTσΟϨΠΛ஌Δ ϞόΠϧϒϥ΢β͸μϒϧλοϓͷ൑ఆͷͨΊ λοϓ͔ͯ͠ΒDMJDLͷൃੜ͕NT஗Ԇ͢Δ ! ϥΠϒϥϦΛ࢖ͬͯվળ͢Δ͜ͱ͸Ͱ͖Δ ୯ͳΔUPVDITUBSU
UPVDIFOEͰ͸աහ͗͢Δ

IUUQVQEBUFTIUNMSPDLTDPNNTUBQEFMBZHPOFBXBZ

IUUQXXXTJUFQPJOUDPNXBZTQSFWFOUNTDMJDLEFMBZNPCJMFEFWJDFT

IUUQTEFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFEJOTJHIUT

λοϓαΠζ͕খ͍͞ͱ͍͏ܯࠂ

$PODMVTJPO ·ͱΊ

ΤϯδχΞϦϯά ͇ ΠϯλϥΫγϣϯ

ΤϯδχΞϦϯάͷ ͢΂ͯΛ஌Δ͜ͱ͸ ೉͍͠

ΠϯλϥΫγϣϯͷ ͢΂ͯΛݕূ͢Δ͜ͱ΋ ೉͍͠

྆ऀͷྑ͍όϥϯεΛ ୳ΔϑϩϯτΤϯυ

5IBOLT IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! ⌂

1IPUPTCZʜ ΫϨϤϯIUUQXXXGMJDLSDPNQIPUPTMBGGZL *OUSPEVDUJPOIUUQXXXGMJDLSDPNQIPUPTKJOUFSXBT /FUXPSLJOHIUUQXXXGMJDLSDPNQIPUPTLFXM 3FOEFSJOHIUUQXXXGMJDLSDPNQIPUPTKEIBODPDL 4DSJQUJOHIUUQXXXGMJDLSDPNQIPUPTOZVIVIVV *OUBSBDUJPOIUUQXXXGMJDLSDPNQIPUPTTUPLFENFEJBQIPUPHSBQIZ $PODMVTJPOIUUQXXXGMJDLSDPNQIPUPTTBBE

Web Frontend Performance Tuning TIPS *n

Web Frontend Performance Tuning TIPS *n

More Decks by Ayumu Sato

Other Decks in Programming

Featured

Transcript