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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Max
February 06, 2013
Programming
4
200
如何发现前端性能问题
如何发现前端性能问题
Max
February 06, 2013
Tweet
Share
More Decks by Max
See All by Max
分层语义化模板实现
maxlee
0
180
让前端开发更高效
maxlee
1
190
七年很痒
maxlee
1
140
跟乐高学模块设计
maxlee
2
140
从YUI2到YUI3看前端的演变
maxlee
0
130
Qzone-前端-CPU-性能优化
maxlee
0
200
更好的文件组织
maxlee
0
95
Mobile App Action design
maxlee
1
100
关于数据分析
maxlee
0
170
Other Decks in Programming
See All in Programming
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
180
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
280
ぼくの開発環境2026
yuzneri
0
250
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
120
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
200
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.6k
React Native × React Router v7 API通信の共通化で考えるべきこと
suguruooki
0
100
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1k
日本だけで解禁されているアプリ起動の方法
ryunakayama
0
270
24時間止められないシステムを守る-医療ITにおけるランサムウェア対策の実際
koukimiura
1
130
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
260
AtCoder Conference 2025
shindannin
0
1.1k
Featured
See All Featured
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.9k
Chasing Engaging Ingredients in Design
codingconduct
0
120
How to Talk to Developers About Accessibility
jct
2
140
The Cult of Friendly URLs
andyhume
79
6.8k
First, design no harm
axbom
PRO
2
1.1k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
120
Done Done
chrislema
186
16k
New Earth Scene 8
popppiees
1
1.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.9k
Practical Orchestrator
shlominoach
191
11k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
270
Optimising Largest Contentful Paint
csswizardry
37
3.6k
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