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
如何发现前端性能问题
Search
Max
February 06, 2013
Programming
4
160
如何发现前端性能问题
如何发现前端性能问题
Max
February 06, 2013
Tweet
Share
More Decks by Max
See All by Max
分层语义化模板实现
maxlee
0
170
让前端开发更高效
maxlee
1
180
七年很痒
maxlee
1
130
跟乐高学模块设计
maxlee
2
130
从YUI2到YUI3看前端的演变
maxlee
0
130
Qzone-前端-CPU-性能优化
maxlee
0
170
更好的文件组织
maxlee
0
87
Mobile App Action design
maxlee
1
92
关于数据分析
maxlee
0
140
Other Decks in Programming
See All in Programming
見た目から始める生産性向上
ikumatadokoro
10
1.4k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Elm Form Validation
bkuhlmann
0
510
Code Reviews
bkuhlmann
4
900
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
510
Let's learn code review
riofujimon
2
580
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
Java 22 Overview
kishida
1
190
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Featured
See All Featured
Navigating Team Friction
lara
179
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Unsuck your backbone
ammeep
663
57k
It's Worth the Effort
3n
180
27k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Gamification - CAS2011
davidbonilla
77
4.6k
Atom: Resistance is Futile
akmur
260
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Code Reviewing Like a Champion
maltzj
515
39k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Transcript
!aoao@ 012(07(07!hangzhou ྟି໙ี ೂޅؿགྷభ؊֥
❈8FJCP!BPBP ❈MPBPBP!HNBJMDPN ❈XXXBPBPPSHDO !aoao@ 012(07(07!hangzhou ྟି໙ี ೂޅؿགྷభ؊֥
❉ྐ༏ ❂ࡆᄛൈ ‘ࡓ॥ !aoao@ 012(07(07!hangzhou ྟି໙ี ೂޅؿགྷభ؊֥
1 ྐ༏ ࠎႿರᆽ֥ඔऌٳ༅
୍ ୍ |c 8&ĕĕĝġ$8×ËďÐč10vËĕĝPġn¤Ć©£Ėøâ610vġeÏ˧10v OġKæ¤10_ġä102ĒĠĈ¤ã±ËġX ăáÖË;ğÊ»ôWËßdا)ġ ¡!2®ġ~'ü¹ÆË´
ٳᇒ ٳᇒ |c 8&ĕĕĝġ$8×ËďÐč10vËĕĝPġn¤Ć©£Ėøâ610vġeÏ˧10v OġKæ¤10_ġä102ĒĠĈ¤ã±ËġX ăáÖË;ğÊ»ôWËßdا)ġ ¡!2®ġ~'ü¹ÆË´
౨ੱ Ⴈਔ؟ഒ൞ॖၛෘԛট֥
17 ౨ੱ Ⴈਔ؟ഒ൞ॖၛෘԛট֥ ü¹Æ*in¤þ¿200+304ü¹ĐĘlzěĚËPV,Ďü¹Æ§ ÊRģ þ¿ü¹Æ50%ă5% ZNâÉËTf(²Ġ
ଧ۱໓ࡱ Фଧ۱်૫ Ⴈહሑ ႄႨਔ؟ഒՑ ¡!2®òÛÞ= UîUěĚÊ Å ~Ê]mµ ġn¤0GË¢G0W¬
Y3FGFS
်૫ሧჷႨ౦ঃ X §÷ěĚ)ÛġnKćC1ěĚËÊ.
ሧჷႨૼ༥ KÎ6·þ¿ËúÊ. <4ûËü¹Æ
None
ሧჷФႄႨ౦ঃ KÎ6Ďþ¿Z*ěĚË~Ê.
҂ൈࡗՄ b¯dZÍNþ¿ġ¤î1Ë NË£ĖġE «ď(ö»ôWæNËþ¿
ൈࡗՄ ၂ൈࡗՄ֥ٚൔ ࣼ൞҂ႨൈࡗՄ Ĝ!û£ĖËĕĝ
ౢԢߏթ JGSBNFMPDBUJPOSFMPBE D£Ėn§½ĘßdËĕĝġ ÝêÎ http://www.aoao.org.cn/blog/2012/06/update-browser-cache/
$PNCPૼ༥ ¼hËþ¿¤§comboËÊġÜ5Ëþ¿comboZāwMÈ
ෆ෬ଖ۱ሧჷ
,*44:ቆࡱٳ༅ K ÿ¢$=Ë2®ġN£FÇĕĝġNkissy îcomboLÓ L²Ëê
,*44:ቆࡱٳ༅ K ÿ¢$=Ë2®ġN£FÇĕĝġNkissy îcomboLÓ L²Ëê
ຩᅟ်૫ vs. 8$ěĚ=£¤?ěĚ2®ġ¤$ˤáÖġIěĚ
҂൞၂۱ದ ᄝᅞ
2 )"3 Ԯඪᇏ֥௸҃ٳ༅
Ĉo+^jzùuÊPġċuÙeJÀsYġ^jÐč6{¤ O
Ĉo+^jzùuÊPġċuÙeJÀsYġ^jÐč6{¤ O
Ĉo+^jzùuÊPġċuÙeJÀsYġ^jÐč6{¤ O
Ĉo+^jzùuÊPġċuÙeJÀsYġ^jÐč6{¤ O
௸҃ Ĉo+^jzùuÊPġċuÙeJÀsYġ^jÐč6{¤ O
)"3 )551"SDIJWF +40/๙Ⴈඔऌ۬ൔ
QBHFT< \ TUBSUFE%BUF5JNF JEQBHF@ UJUMFวЏຩวĆ༟ߋ QBHF5JNJOHT\ PO$POUFOU-PBE PO-PBE ^ ^
်૫ࠎЧྐ༏
@SFOEFS4UBSU PO$POUFOU-PBE PO-PBE ^ QBHFT< \ TUBSUFE%BUF5JNF JEQBHF@ UJUMFวЏຩวĆ༟ߋ QBHF5JNJOHT\
်૫ࠎЧྐ༏ §ąÒ§Ë9æġ¸b|c¾°Ë£Ė
ૄ۱౨֥༥ࢫ FOUSJFT< \ QBHFSFGQBHF@ TUBSUFE%BUF5JNF UJNF SFRVFTU\^ SFTQPOTF\^ UJNJOHT\^
DBDIF\^ DPNNFOU CMPDLFE EOT DPOOFDU TFOE XBJU SFDFJWF Ĥ UJNJOHT\^ ÝêĢ http://www.softwareishard.com/blog/har-12-spec/
-PDBM$BDIF ËàÁ¤ºæ÷Āª[ßdË"ġĈ¤æõ- Kõġµtßd µtßdġĈ²KÐčU¤Āª[ßdË
ೂޅࠆ౼
Firebug / NetExport HttpWatch IE Developer Tools Chrome Developer To
WEBPAGETEST Fiddler dynaTrace PhantomJS ᄸဢࠆ౼)"3
ु҂֥ᛍফఖ XXXQIBOUPNKTPSH PhantomJS
ቔႨĤ
YSlow PageSpeed )"3֥ቔႨ ]9æď¤\har 2®Ë
۱ྟ߄ ᄝᆃ۱છ્֥ൈսᄸି๙Ⴈ ìÂPageSpeedăYSlow aġ·áÖ立áÖÄéġċÊË¡³wgĊM
ÖZpËåçġ#ó3níġ¸b/mü¹2a0í N£KèrË;þ¿ĉí2ÚġU¤HËğUËyËğU¤;ÊËØØġĈ² ¦¡!gĕĝ
ÖZpËåçġ#ó3níġ¸b/mü¹2a0í N£KèrË;þ¿ĉí2ÚġU¤HËğUËyËğU¤;ÊËØØġĈ² ¦¡!gĕĝ
ÖZpËåçġ#ó3níġ¸b/mü¹2a0í N£KèrË;þ¿ĉí2ÚġU¤HËğUËyËğU¤;ÊËØØġĈ² ¦¡!gĕĝ
54MPX ĈăYSlow%ġI¤ĂZ¨;WËġÊhar2® ġÇZ9æKæćºª[aĠ ò$RģK¦¡!Ë:'g7Ë,k
54MPX ĈăYSlow%ġI¤ĂZ¨;WËġÊhar2® ġÇZ9æKæćºª[aĠ ò$RģK¦¡!Ë:'g7Ë,k
54MPX ĈăYSlow%ġI¤ĂZ¨;WËġÊhar2® ġÇZ9æKæćºª[aĠ ò$RģK¦¡!Ë:'g7Ë,k
54MPX ĈăYSlow%ġI¤ĂZ¨;WËġÊhar2® ġÇZ9æKæćºª[aĠ ò$RģK¦¡!Ë:'g7Ë,k
:4MPX భ؊ඔऌᇏྏ
ؓગĤ
3 ࡓ॥ ቕᄝࡅुႯࡱ္ିؿགྷ໙ี
ܱൈࡗ 4UBSU3FOEFS %PN3FBEZ 1BHF-PBE 55*
4UBSU3FOEFS ᛍফఖषᛴಙ NT'JSTU1BJOU
4UBSU3FOEFS 55'# 5JNF5P'JSTU#ZUF ؿఏ౨֞ڛༀఖْ߭ඔऌ֥ൈࡗ 55%% 5JNF5P%PDVNFOU%PXOMPBE Ֆڛༀఖ༯ᄛ)5.-໓֖֥ൈࡗ 55)& 5JNF5P)FBE&OE )5.-໓֖҆ࢳ༅ປӮ෮ླေ֥ൈࡗ
%PN3FBEZ ်૫ࢳ༅ປӮ %PN$POUFOU-PBEFE
%PN3FBEZ 4UBSU3FOEFS 55%$ 5JNF5P%PN$SFBUFE %0.ඎԷࡹ෮ཨݻൈࡗ 5545 5JNF5P4DSJQU #0%:ᇏ෮ႵЧࡆᄛބᆳྛ֥ൈࡗ
1BHF-PBE ်૫ࡆᄛປӮ XJOEPXPOMPBE
1BHF-PBE 4UBSU3FOEFS %PN3FBEZ 3FTPVSDF%PXOMPBE ࡥֆটඪ෮Ⴕ֥ሧჷࡆᄛປ
55* 5JNF5P*OUFSBDU ॖࣉྛࢌ֥ൈࡗ ¸b ¼hĞě¶ ËxQ¥Ñ1ÇË£Ė ¸b VSúě ÕAýēKÊË£Ė
55* 5JNF5P*OUFSBDU 4UBSU3FOEFS $PSF)5.-3FOEFS ނྏۿିཌྷܱ֥)5.-ᛴಙປӮ $PSF+BWBTDSJQU#JOE ނྏۿିཌྷܱ֥+BWBTDSJQUϾקປӮ
അབྷ౦
VSúě$iĄġFǧï#ăºï#ËěĚq5Ä5^Ġ
EJGGልྩ Ⴕሱ််ָ֥࠭ ٳোॖିݷޓ؟čࣼ൞ݺ؟ோĎ ିልྩ֥ᇶഅோ၂Ϯޓ؟ ၂ུϖᄦ֥ଆॶ 1µË>5£ġnKöđl=
{ JSTracker } ĘÌ£ĖġćÌ1ĔË.
iÇwę window.onerror
None
$44/BLFE ćÌěĚð`Ë.
None
ॢဢൔ N£Ĝ!FÇĕĝġ§@jġiėBÔ˲}Ġ áČćaġáČ£ġÊBZëØf(º ËñĠ
྆྆ᯚ๐ ֥໙ี
None