如何发现前端的性能问题

优化前端性能，最大的问题不是在于怎样优化，而是怎样找出问题。本次分享包含以下几大部分内容：1 通过日志来分析问题。2 通过 har 来分析问题。3 通过监控来发现问题。

Transcript

1. !aoao@ 012(07(07!hangzhou ྟି໙ี ೂޅؿགྷభ؊֥
2. ❈
   8FJCP!BPBP ❈
   MPBPBP!HNBJMDPN ❈
   XXXBPBPPSHDO !aoao@ 012(07(07!hangzhou ྟି໙ี ೂޅؿགྷభ؊֥
3. 
   ❉
   
   ྐ༏
   ❂
   
   ࡆᄛൈ
   ‘
   
   ࡓ॥ !aoao@ 012(07(07!hangzhou ྟି໙ี ೂޅؿགྷభ؊֥
4. 1 ྐ༏ ࠎႿರᆽ֥ඔऌٳ༅
5. 
   ୍
   ୍  |c 8&ĕĕĝġ$8×ËďÐč10vËĕĝPġn¤Ć©£Ėøâ610vġeÏ˧10v OġKæ¤10_ġä102ĒĠĈ¤ã±ËġX ăáÖË;ğʑ»ôWËßdا)ġ  ¡!2®ġŽ~'ü¹ÆË´„
6. ٳᇒ ٳᇒ  |c 8&ĕĕĝġ$8×ËďÐč10vËĕĝPġn¤Ć©£Ėøâ610vġeÏ˧10v OġKæ¤10_ġä102ĒĠĈ¤ã±ËġX ăáÖË;ğʑ»ôWËßdا)ġ  ¡!2®ġŽ~'ü¹ÆË´„
7. ౨౰ੱ ୆Ⴈਔ؟ഒ൞ॖၛෘԛট֥
8. 
   
    17 ౨౰ੱ ୆Ⴈਔ؟ഒ൞ॖၛෘԛট֥ ü¹Æ*in¤þ¿200+304ü¹ĐĘlzěĚËPV,Ďü¹Æ§ ÊRģ
   þ¿ü¹Æ50%ă5% ZNâÉˀTf(
   ²Ġ
9. ଧ۱໓ࡱ Фଧ۱်૫ Ⴈ൉હሑ෿ ႄႨਔ؟ഒՑ ¡!2®ŽòÛÞ= UŸîUěĚÊ Ņ~Ê]mµ ġn¤•0GË¢‚G0W¬
10. Y3FGFS
11. ်૫ሧჷ൐Ⴈ౦ঃ X §÷ěĚ)ÛġnKćC1ěĚËʉ.
12. ሧჷ൐Ⴈૼ༥ KÎ
    6·þ¿Ëú‰ʉ. <—4’ûËü¹Æ
14. ሧჷФႄႨ౦ঃ KÎ6Ďþ¿Z*ěĚË~ʉ.
15. ҂๝ൈࡗՄ b¯dZÍNþ¿ġ¤î”1­Ë NË£ĖġE «ď(ö»ôWæNËþ¿
16. ൈࡗՄ ๤၂ൈࡗՄ֥ٚൔ ࣼ൞҂ႨൈࡗՄ Ĝ!û£ĖËĕĝ
17. ౢԢߏթ JGSBNF
    MPDBUJPOSFMPBE
    Dš£Ėn§½ĘßdËĕĝġ ÝêÎ http://www.aoao.org.cn/blog/2012/06/update-browser-cache/
18. $PNCPૼ༥ ¼hËþ¿¤§comboËÊġÜ5Ëþ¿comboZ
    āwMÈ
19. ෆ෬ଖ۱ሧჷ
20. ,*44:
    ቆࡱٳ༅ ŽK ÿ¢‚$
    †=Ë2®ġN£ŽFÇ
    ĕĝġN
    kissy îcomboLÓ L²Ëê
21. ,*44:
    ቆࡱٳ༅ ŽK ÿ¢‚$
    †=Ë2®ġN£ŽFÇ
    ĕĝġN
    kissy îcomboLÓ L²Ëê
22. ຩᅟ
    
    
    
    
    ်૫
    vs.
    8Ž$ěĚ=£‡¤?ěĚ2®ġ¤Ž$ˤáÖġI
    ěĚ
23. ୆҂൞၂۱ದ ᄝᅞ׶
24. 2 )"3 Ԯඪᇏ֥௸҃๭ٳ༅
25. Ĉo+^jzùuÊPġċuÙeJÀsYġ^jÐč6{¤ O
26. Ĉo+^jzùuÊPġċuÙeJÀsYġ^jÐč6{¤ O
27. Ĉo+^jzùuÊPġċuÙeJÀsYġ^jÐč6{¤ O
28. Ĉo+^jzùuÊPġċuÙeJÀsYġ^jÐč6{¤ O
29. ௸҃๭ Ĉo+^jzùuÊPġċuÙeJÀsYġ^jÐč6{¤ O
30. )"3 )551
    "SDIJWF
     +40/
    ๙Ⴈඔऌ۬ൔ
31. 
    QBHFT
    <
    
    
    
    
    
    \
    
    
    
    
    
    
    
    TUBSUFE%BUF5JNF
    
    
    
    
    
    
    
    
    JE
    QBHF@
    
    
    
    
    
    
    
    UJUMF
    วЏຩ
    
    วĆ໡༟ߋ
    
    
    
    
    
    
    
    QBHF5JNJOHT
    \
    
    
    
    
    
    
    
    
    
    PO$POUFOU-PBE
    
    
    
    
    
    
    
    
    
    
    PO-PBE
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    
    ^ ်૫ࠎЧྐ༏
32. @SFOEFS4UBSU
    
    
    
    
    
    
    
    
    
    
    
    PO$POUFOU-PBE
    
    
    
    
    
    
    
    
    
    
    PO-PBE
    
    
    
    
    
    
    
    
    ^
    QBHFT
    <
    
    
    
    
    
    \
    
    
    
    
    
    
    
    TUBSUFE%BUF5JNF
    
    
    
    
    
    
    
    
    JE
    QBHF@
    
    
    
    
    
    
    
    UJUMF
    วЏຩ
    
    วĆ໡༟ߋ
    
    
    
    
    
    
    
    QBHF5JNJOHT
    \ ်૫ࠎЧྐ༏ §ą“Ò§Ë9æġ¸b|c¾°Ë£Ė
33. ૄ۱౨౰֥༥ࢫ FOUSJFT
    <
    
    
    \
    
    
    
    
    
    
    QBHFSFG
    QBHF@
    
    
    
    
    
    
    
    TUBSUFE%BUF5JNF
    
    
    
    
    
    
    
    UJNF
    
    
    
    
    
    
    
    SFRVFTU
    \^
    
    
    
    
    
    
    SFTQPOTF
    \^
    
    
    
    
    
    
    UJNJOHT
    \^
    
    
    
    
    
    
    DBDIF
    \^
    
    
    
    
    
    
    
    
    
    
    
    
    
    DPNNFOU
    
    
    
    
    
    CMPDLFE
    
    
    
    
    
    EOT
    
    
    
    
    
    DPOOFDU
    
    
    
    
    
    TFOE
    
    
    
    
    
    XBJU
    
    
    
    
    
    SFDFJWF
     Ĥ UJNJOHT
    \^ ÝêĢ http://www.softwareishard.com/blog/har-12-spec/
34. -PDBM$BDIF
    ËàÁ¤ºæ÷Āª[ßdË"ˆġĈ¤æõ- ŽKõž™ġ
    µtßd
    µtßdġĈ²KÐčU¤Āª[ßdË
35. ೂޅࠆ౼
36. Firebug / NetExport HttpWatch IE Developer Tools Chrome Developer To WEBPAGETEST Fiddler dynaTrace PhantomJS ᄸဢࠆ౼
    )"3
37. ु҂࡮֥ᛍফఖ XXXQIBOUPNKTPSH PhantomJS
38. ቔႨ଻Ĥ
39. YSlow PageSpeed )"3
    ֥ቔႨ ]ž9æď¤\har 2®Ë
40. ۱ྟ߄ ᄝᆃ۱છ્֥ൈսᄸି๙Ⴈ ìÂPageSpeedăYSlow aġ·áÖ立áÖÄéġċÊË¡³w
    gĊM
41. ÖZpËåçġŽ#ó3níġ¸b•/mü¹–2a0í N£K˜ŽèrË;•þ¿ĉí2ÚġU¤›HËğUËyËğU¤;ÊËØØġĈ² ¦¡!gĕĝ
42. ÖZpËåçġŽ#ó3níġ¸b•/mü¹–2a0í N£K˜ŽèrË;•þ¿ĉí2ÚġU¤›HËğUËyËğU¤;ÊËØØġĈ² ¦¡!gĕĝ
43. ÖZpËåçġŽ#ó3níġ¸b•/mü¹–2a0í N£K˜ŽèrË;•þ¿ĉí2ÚġU¤›HËğUËyËğU¤;ÊËØØġĈ² ¦¡!gĕĝ
44. 54MPX
    ĈăYSlow%ġI¤ĂZ¨;WËġÊhar­2® ġÇZ9æKæćºª[aĠ Ž  ò$RģŽK¦¡!Ë:'g7Ë,k
45. 54MPX
    ĈăYSlow%ġI¤ĂZ¨;WËġÊhar­2® ġÇZ9æKæćºª[aĠ Ž  ò$RģŽK¦¡!Ë:'g7Ë,k
46. 54MPX
    ĈăYSlow%ġI¤ĂZ¨;WËġÊhar­2® ġÇZ9æKæćºª[aĠ Ž  ò$RģŽK¦¡!Ë:'g7Ë,k
47. 54MPX
    ĈăYSlow%ġI¤ĂZ¨;WËġÊhar­2® ġÇZ9æKæćºª[aĠ Ž  ò$RģŽK¦¡!Ë:'g7Ë,k
48. :4MPX భ؊ඔऌᇏྏ
49. ؓગĤ
50. 3 ࡓ॥ ቕᄝࡅ৚ुႯࡱ္ିؿགྷ໙ี
51. ܱ࡯ൈࡗ 4UBSU
    3FOEFS
    %PN3FBEZ
    1BHF
    -PBE
    55*
52. 4UBSU
    3FOEFS ᛍফఖष൓ᛴಙ NT'JSTU1BJOU
53. 4UBSU
    3FOEFS
    55'#
    5JNF
    5P
    'JSTU
    #ZUF ؿఏ౨౰֞ڛༀఖْ߭ඔऌ֥ൈࡗ 55%%
    5JNF
    5P
    %PDVNFOU
    %PXOMPBE Ֆڛༀఖ༯ᄛ)5.-໓֖֥ൈࡗ 55)&
    5JNF
    5P
    )FBE
    &OE )5.-໓֖๨҆ࢳ༅ປӮ෮ླေ֥ൈࡗ
54. %PN
    3FBEZ ်૫ࢳ༅ປӮ %PN$POUFOU-PBEFE
55. %PN3FBEZ 4UBSU
    3FOEFS 55%$
    5JNF
    5P
    %PN
    $SFBUFE %0.ඎԷࡹ෮ཨݻൈࡗ 5545
    5JNF
    5P
    4DSJQU #0%:ᇏ෮Ⴕ࢖Чࡆᄛބᆳྛ֥ൈࡗ
56. 1BHF
    -PBE ်૫ࡆᄛປӮ XJOEPXPOMPBE
57. 1BHF
    -PBE 4UBSU
    3FOEFS
    %PN3FBEZ 3FTPVSDF
    %PXOMPBE ࡥֆটඪ෮Ⴕ֥ሧჷࡆᄛປ
58. 55* 5JNF
    5P
    *OUFSBDU
    ॖࣉྛࢌ޺֥ൈࡗ ¸b ¼hĞě¶ ËxQ¥Ñ1ÇË£Ė ¸b VSú‰ě ÕAý˜ēKÊË£Ė
59. 55*
    5JNF
    5P
    *OUFSBDU 4UBSU
    3FOEFS $PSF
    )5.-
    3FOEFS ނྏۿିཌྷܱ֥)5.-
    ᛴಙປӮ $PSF
    +BWBTDSJQU
    #JOE ނྏۿିཌྷܱ֥+BWBTDSJQU
    ϾקປӮ
60. അ௖བྷ౦
61. ŽVSú‰ě$
    iĄġFǧï#ăºï#ËěĚq5Ä5^Ġ
62. EJGG
    ልྩ Ⴕሱ်֥࠭๨
    ်ָ
    ٳোॖିݷ޿ޓ؟čࣼ൞ݺ؟๭ோĎ ିልྩ֥ᇶ
    അ௖๭ோ၂Ϯޓ؟ ၂ུ੹௾ϖᄦ֥ଆॶ Ž”1µË>5£ġnKöđl†=
63. { JSTracker } Ę̜£ĖġŽć̜1Ĕˉ.
64. iÇwę window.onerror
66. $44
    /BLFE Žć̜ěĚð`ˉ.
68. ॢဢൔ N£Ĝ!FÇ
    ĕĝġ§@jŒġiėBÔ˲}Ġ áȃćaġáȋ£ġʑBZëØf(ºŠ ËñĠ
69. ྆྆ᯚ๐ ୆֥໙ี