Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webフロントエンドパフォーマンスチューニング
Search
Ryo Maruyama
November 19, 2013
Technology
39
9.1k
Webフロントエンドパフォーマンスチューニング
Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。
Ryo Maruyama
November 19, 2013
Tweet
Share
More Decks by Ryo Maruyama
See All by Ryo Maruyama
MTG Playbookの使い方
h13i32maru
0
3k
チームでプロダクト開発するための取り組み/cookpadtechconf2017
h13i32maru
15
11k
ESDoc - ES6時代のドキュメンテーションツール - Node学園祭2015
h13i32maru
15
8.9k
ESDoc - ES6時代のドキュメンテーションツール
h13i32maru
6
2.4k
Other Decks in Technology
See All in Technology
データエンジニアがこの先生きのこるには...?
10xinc
0
430
Pure Goで体験するWasmの未来
askua
1
170
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
160
Windows で省エネ
murachiakira
0
150
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
250
多野優介
tanoyusuke
1
170
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
820
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
290
SOC2取得の全体像
shonansurvivors
1
350
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
340
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.1k
いまさら聞けない ABテスト入門
skmr2348
1
180
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Navigating Team Friction
lara
189
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Code Reviewing Like a Champion
maltzj
525
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
570
Transcript
8FCϑϩϯτΤϯυ ύϑΥʔϚϯενϡʔχϯά ؙࢁ྄!IJNBSV
ࣗݾհ wؙࢁ྄!IJNBSV w,-BCגࣜձࣾॴଐ w+BWB4DSJQUॻ͓͘ࣄ ,OPDLPVU+4 #VTUFS+4 FUD wྉཧͱ৯ثूΊ͕झຯ IUUQTUXJUUFSDPNIJNBSV
+BWB4DSJQUॏ͍ ࣮ࡍͲΕ͘Β͍ॏ͍ͷʁ
+BWB4DSJQUWT$
+BWB4DSJQUWT$ +BWB4DSJQUୈ൛ ্Լ $ ΫΠοΫϦϑΝϨϯε ্Լ
+BWB4DSJQUWT$ +BWB4DSJQUୈ൛ ্Լ $ ΫΠοΫϦϑΝϨϯε ্Լ LH LH
ͱɺ+BWB4DSJQU͕ॏ͍ͷ͔ͬͨɻ Ͱ8FCϑϩϯτΤϯυ +BWB4DSJQU͚ͩͰͳ͍ͷͰɺ શମతͳ͓Λ͠·͢ɻ ͪͳΈʹ࠷େͷϘτϧωοΫʮୈষK2VFSZϥΠϒϥϦ ϖʔδ ʯ
ࠓͷ༰ wͱ͋ΔϞόΠϧҊ݅ͰߦͬͨύϑΥʔϚϯε νϡʔχϯάʹ͍ͭͯ "OESPJE J04 wεςοϓ wπʔϧ wϙΠϯτ
νϡʔχϯάͷεςοϓ ॏ͍ͱ͜ΖΛϦετΞοϓ ࣌ؒ'14Λଌఆ ϘτϧωοΫΛௐࠪ ରԠࡦΛߟ͑Δ ࣮ ޮՌଌఆ
νϡʔχϯάͷεςοϓ ॏ͍ͱ͜ΖΛϦετΞοϓ ࣌ؒ'14Λଌఆ ϘτϧωοΫΛௐࠪ ରԠࡦΛߟ͑Δ ࣮ ޮՌଌఆ Ͳ͏ͨ͠Β ͍͍ͷʁ
IUUQTEFWFMPQFSTHPPHMFDPNDISPNFEFWFMPQFSUPPMT $ISPNF%FW5PPMT
$ISPNF%FW5PPMT w/FUXPSL w ωοτϫʔΫΞΫηεʹ͍ͭͯͷใ w5JNFMJOF w ϒϥβ෦ͷΠϕϯτʹ͍ͭͯͷใ w$161SPpMF w ίʔϧελοΫͱ$16λΠϜʹ͍ͭͯͷใ
w3FNPUF%FCVHHJOHPO"OESPJE w ࣮ػ্Ͱͷσόοά
/FUXPSL
5JNFMJOF
$161SPpMF "OESPJE$ISPNF W ಈ͖͕͓͔͍͠ͷͰ"OESPJE$ISPNF#FUB W ͍·͠ΐ͏
3FNPUF%FCVHHJOHPO"OESPJE
ͭͷϘτϧωοΫ
ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε
ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε w+BWB4DSJQU࣮ߦ࣌ؒ
ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε w+BWB4DSJQU࣮ߦ࣌ؒ wϨΠΞτϖΠϯτ
ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε w+BWB4DSJQU࣮ߦ࣌ؒ wϨΠΞτϖΠϯτ ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ҆ఆͷࠃ࢈"OESPJEɹʻ ʉ?:?:?:?:?:?:?:?:?ʉ ࠓ্ͷͭʹ͍͚ͭͯͩɻ
ωοτϫʔΫΞΫηε
ωοτϫʔΫΞΫηε wసૹ͢ΔσʔλαΠζͳΔ͘খ͘͞ wNJOJGZ NBOHMF w ѹॖɺѹॖ͕࣌ؒΑ͍ͷͰ6HMJGZ+4͓͢͢Ί wςΩετσʔλH[JQѹॖ w1/(ը૾CJU1BMFUUF w ࣭͕ྑ͍ͷͰ0151J9͓͢͢Ί
σʔλαΠζ
ωοτϫʔΫΞΫηε w੩తίϯςϯπΛΩϟογϡ wΩϟογϡ༰ྔ"OESPJEܥͰ.# w ΞϓϦͷߏόʔδϣϯɺͰมΘΔ͔ w$BDIF$POUSPM w OPDBDIFJGNPEJpFETJODF w NBYBHF
w ӡ༻ΞϓϦͷߋ৽සͳͲʹؔ͘͢͢͝Δ Ωϟογϡ
ωοτϫʔΫΞΫηε wίωΫγϣϯͷઅΦʔόʔϔουܰݮ w"OESPJE 9QFSJB49 ͩͱಉ࣌ίωΫγϣϯຊ w,FFQ"MJWFΛ༗ޮʹͯ͠5$1ଓΛ࠶ར༻ ίωΫγϣϯ
+BWB4DSJQU࣮ߦ࣌ؒ
+BWB4DSJQU࣮ߦ࣌ؒ wϑΝΠϧΛϩʔυ͢Δ͚ͩͰ͕͔͔࣌ؒΔ wK2VFSZͰNT 9QFSJB(9 w K2VFSZϓϥάΠϯ'BTU$MJDL͍ΕΔͱNT w K2VFSZΛΊͯඞཁͳػೳ͚ͩΛͬͨK2VFSZ-JLFͳϥΠϒϥϦΛ࣮ w $MJDLΠϕϯτΊͯ5PVDIΠϕϯτͰ࣮
ϩʔυ࣌ؒ
+BWB4DSJQU࣮ߦ࣌ؒ wΠϕϯτΛॲཧ͢Δ࣌ؒΛ͘͢Δ wදࣔཁૉ͕ଟ͍ςϯϓϨʔτΛϑϨʔϜϫʔΫ ʹॲཧͤ͞Δͱॏ͍ ߹͕͋Δ w ,OPDLPVU+4ͰTFD͔͔Δॲཧ͕͋ͬͨ ίʔϧελοΫେྔ w ͦͷ෦ಠࣗͷςϯϓϨʔτॲཧΛ࣮ͯ͠TFDʹ͑ͨ
w 6*8FC7JFX J04 +*5͕ޮ͔ͳ͍ͷͰ"OESPJEΑΓ͍ w ࣮ݧతʹ8FC8PSLFSΛͬͨΒരʹͳͬͨ Πϕϯτॲཧ࣌ؒ
+BWB4DSJQU࣮ߦ࣌ؒ wλΠϚʔϧʔϓҰՕॴͰཧ͢Δ w .Z-PPQFSBEE DBMMCBDL ͱͯ͠λΠϚʔϧʔϓΛཧ͢Δ w ίʔϧόοΫͷྦྷੵ࣮ߦ͕࣌ؒ͘ͳͬͨ߹ɺॲཧΛதஅ͢Δ wεϖοΫʹԠͯ͡'14Λม͑Δ wSFRVFTU"OJNBUJPO'SBNF҆ఆͯ͠ͳ͍
w J04ͰSFRVFTU"OJNBUJPO'SBNF͕ൃՐ͠ͳ͍߹͕͋Δ λΠϚʔϧʔϓ
ϨΠΞτϖΠϯτ
ϨΠΞτϖΠϯτ wը໘ʹදࣔ͞Εͳ͍ͷEJTQMBZOPOF w %0.ϨΠΞτπϦʔ͔Βআ֎͢Δ wΞχϝʔγϣϯॲཧ(16Ͱߦ͏ w ͨͩ͠"OESPJEҎ্ͰͷΈ(16Λ༗ޮʹ͢Δ "OESPJE.BOJGFTU 8JOEPX.BOBHFS-BZPVU1BSBNT'-"(@)"3%8"3&@"$$&-&3"5&%
w %ܥ҆ఆͯ͠ͳ͍ͷͰΘͳ͍ w Կ͔ϨϯμϦϯά͕͓͔͍͠ͱࢥͬͨΒɺUSBOTGPSN PQBDJUZ USBOTJUJPO ! XFCLJULFZGSBNFT͋ͨΓΛٙ͏ ϒϥβʹ༏͘͠
ϨΠΞτϖΠϯτ w-8' $SFBUF+4 &EHF"OJNBUF+4 w4FODIB"OJNBUPS8FCLJU"OJNBUJPO w +4Ͱ੍ޚ͢ΔͷΑΓύϑΥʔϚϯε͕Α͍ w "OESPJE͝ΊΜͳ͍͞ Ξχϝʔγϣϯπʔϧ
·ͱΊ
·ͱΊ w$ISPNF%FW5PPMT͍͢͝ w ͨ͘͞Μͷػೳ͕͋ΔͷͰ͍͜ͳͤΔΑ͏ʹͳΔͷେม wௐࠪɺ࣮ɺଌఆͷ܁Γฦ͠ w ಓʹͭͭ͜͜ؤுΔ wϒϥβجຊతʹ༏ल w ϒϥβ͕࠷େݶͷྗΛൃش͢ΔΑ͏ʹαϙʔτ͢Δ
͓·͚ wύϑΥʔϚϯενϡʔχϯάϝϞ w ϲ݄ؒͷνϡʔχϯάաఔΛϖʔδͷϝϞͱͯ͠ެ։ ࣾݶఆ w$ISPNFUSBDJOH w 5JNFMJOFΞϚνϡΞ༻ɺ5SBDJOHϓϩ༻Β͍͠ w6*8FC7JFXͷΩϟογϡػߏ͜ΘΕͯΔ w
ϝϞϦ্ͷΩϟογϡΛফڈͰ͖ͳ͍ w 6TFS"HFOU͕ҟͳΔͱಉ͡63-ͰผͷΩϟογϡͱͯ͠ѻΘΕΔ
͓ΘΓ IUUQTUXJUUFSDPNIJNBSV