Performance - Web 前端程式開發實務

Transcript

1. Copyright © 2012 FITPI. All rights reserved. ྛ≐ੀඣ
   ↌ᅟིି భ؊۽ӱῘứℯ↩⇪‣
    ᾣ℩ğᾠקდ
   
   KPTFQIK 1
2. Copyright © 2012 FITPI. All rights reserved. 8FC
   ིି 2 Our performance golden rule is: optimize front- end performance first, that's where 80% or more of the end-user response time is spent. Steve Souders Google High Performance Engineer ↌ᅟིିླ༵∱߄భ؊đၹᆜⅴ
   3FTQPOTF
   ℭᾇᇏđభ؊ᅝਔ
   b
3. Copyright © 2012 FITPI. All rights reserved. ↌ᅟིିᾋṦ۽ऎ ๏ :4MPX IUUQEFWFMPQFSZBIPPDPNZTMPX ๏ 1BHF
   4QFFE IUUQTEFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFE
   3 նᇁῲ䪌׻൞ᄝ⏟´ఖᇏν⊬၂ἠ۽ऎ ෱὜၇ᅶ၂ུ⊵≣
   ॖỆᆜ
   ٳ༅෮ᄝ↌∉ིି ‣↮ğ⊬ఏῲᄝ୆ӈႨ֥↌ᅟ஝஝ु
4. Copyright © 2012 FITPI. All rights reserved. 1BHF
   4QFFE 4
5. Copyright © 2012 FITPI. All rights reserved. :4MPX 5
6. Copyright © 2012 FITPI. All rights reserved. ↌∉ིି⇊ଢ ๏ $BDIF
   
   ⏟´ఖ؊aයڛఖ؊a$%/ ๏ (;JQ
   
   ↌∉ẖ℻֥ሱọ⇭⅜Ὠᇅ ๏ 㦆ഒ
   )551
   ⃪֥౰⅂ਈ ๏ ᾞ
   $44+BWB4DSJQU
   ቋཬ߄ ๏ ⅾோቋࡄ߄ ๏ ↥؁ೖ≘ೆ 6 Ᾱਙԛ၂ིུିڿΆ֥ᇗề
7. Copyright © 2012 FITPI. All rights reserved. $%/ ๏ $POUFOU
   %FMJWFSZ
   /FUXPSLb ๏ 4FSWFS
   ⟦ඇᄝಆൗࢸ֥ૄἠֹٚb ❖ "NB[PO
   ࠇ
   "LBNFJ
   ׻ႵՎሿ ڛ↩b ๏ ♶⚧ῲჷ↌ᅟ֥
   +4
   
   $44
   
   *NBHFT
   ֩僯Ⅲẵσb ๏ ℳႨᧄॴἽڛ↩֥ᇏն྘↌ᅟb ❖ ২ೂ
   :BIPP
   (PPHMF
   ֩ಆ౯߄↌ᅟb ๏ ൐Ⴈᆀթ౼ቋ࣍ࠇ෎؇ቋॹ֥
   $%/
   4FSWFSđط٤ჰ ൓ẵσթ٢ֹ֥ٚb 7
8. Copyright © 2012 FITPI. All rights reserved. 8 $%/ ൐Ⴈᆀթ౼ቋ࣍ࠇ෎؇ቋॹ֥
   $%/
   4FSWFS ط٤ჰ൓ẵσթ٢ֹ֥ٚ
9. Copyright © 2012 FITPI. All rights reserved. 9 ỚῘứ֥႕⇉ ๏ $%/
   ၂֊ሂ֞ẵσđ≁℟὜٢
   
   ୍ၛഈb ๏ ℭᾇ⤨҂὜ཟ୆֥යڛఖᇗྍ෬౼ẵσb ๏ Ῐứᆀླေڿṉẵ଀ࠇࡆഈϱὂč২ೂℭᾇՄὸa ࠇ
   WFSTJPOĎҌି⃸
   $%/
   ᇗሂ⊷ਘ ❖ ჰ൓ẵσğGPPKT
   ❖ ڿṉẵ଀ğGPP@SKT ❖ ᄹࡆ
   (&5
   Ṛ⅂ğGPPKT S
10. Copyright © 2012 FITPI. All rights reserved. (;JQ
    
    %FGMBUF 10 http://www.sebkuehn.com/blog/seo/speed-up-your-website-for-better-seo/ 8FC
    4FSWFS
    ∻
    #SPXTFS
    ᾇ֥ࡆࢳ⇭⅜Ὠᇅ ೏ᆦჱ
    (;JQ%FGMBUFđ὜ᾞ໓ሳẵ⇭⅜㬪
    #JOBSZ
    ẖෂ ᄝ
    #SPXTFS
    ؊ࢳ⇭⅜a₹ῥॖᾳസޓ؟Ć
11. Copyright © 2012 FITPI. All rights reserved. (;JQ
    
    %FGMBUF 11 <IfModule mod_deflate.c> DeflateCompressionLevel 6 AddOutputFilter DEFLATE html htm xml css js php AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-httpd-php </IfModule> ໓ሳ ྘֥ẵσ׻ॖၛ℟ק
12. Copyright © 2012 FITPI. All rights reserved. 㦆ഒ
    )551
    ⃪౰⅂ਈ 12 ๏ )551
    ⇐ק֥
    3FRVFTU
    
    3FTQPOTF
    5$1
    ൞υἹ֥a∣ἐམḰم㦆ഒb ๏ 㦆ഒ⃪౰⅂ਈ֥ٚൔնᇁೂ༯ğ ❖ $44
    4QSJUFT
    
    ކ⟸୆֥ⅾோ ❖ ҆ٳⅾோ㍇Ⴈ
    %BUB
    63* ❖ ކ⟸
    +BWB4DSJQU
    
    $44
    ẵσ ❖ ⅾோ
    -B[Z
    -PBE
    ࠯ℿ ๏ ֩༯὜ῲࢺℚކ⟸ࠣ
    -B[Z
    -PBE
    ֥࠯ℿ
13. Copyright © 2012 FITPI. All rights reserved. ⅾோቋࡄ߄ 13 ๏ (*'
    
    
    ೤aᆦჱ๩ૼ
    *OEFY aọ὎b ๏ 1/(
    
    
    ೤aᆦჱ϶๩ૼ
    "MQIB ❖ ቋℳކ↌∉൐Ⴈ֥ⅾẵ۬ൔ ❖ "EPCF
    'JSFXPSLT
    ൞ື၂ᆦჱ⊨㍤㬪
    1/(
    ϶๩ૼ֥ℂⅴb ๏ 1/(
    
    ⅂Ϥ↋೤aᆦჱ϶๩ૼ
    "MQIB b ❖ ♶≗ⅾཞč٤ᅶோĎ ๏ +1(
    
    ᾹℳކႨᧄᅶோb ๏ ⇢≢ⅾோ۬ൔ֥喆ࣁჰ≣ğ ᅶோႨ
    +1&(aọ὎Ⴈ
    (*'aః∸ಆ҆Ⴈ
    1/(b ๏ ⅾோ䥰Ⴕޓ؟Ⴈ҂֥֞⊷⇫đॖၛ๩Ἶ۽ऎࢆ֮ᆜⅴ
    4J[F IUUQTHJUIVCDPNKPTFQIKPQUJNH
14. Copyright © 2012 FITPI. All rights reserved. ིିࢳ㢯ٚσ 14 ၂ུିॹ෎ڿ೿భ؊ིି֥۽ऎ∻ٚم
15. Copyright © 2012 FITPI. All rights reserved. 15 $44+BWB4DSJQU
    ֥ ކ⟸∻ቋཬ߄ Ⴈ۽ऎ၂Ցࢳ㢯‥ἠིି↜ⅳ
16. Copyright © 2012 FITPI. All rights reserved. ⇢≢
    
    .*/* ๩Ἶ℟קẵ ᾞ؟ἠẵσކ⟸aቋཬ߄ ֥Ῐứὔ࣢۽ऎ http://www.flickr.com/photos/prettypony/2644225789/ https://github.com/josephj/mini 16
17. Copyright © 2012 FITPI. All rights reserved. ⇨ᅳẵσ֥ਫ਼῅đॖၛႵ؟ἠ %&7@3005
    ൞
    "QBDIF
    ֥ὔ࣢ṉ⅂ ק∕
    EFNP
    Ⴕଧུ
    $44
    ∻
    +4
    ẵσ 17 ๩Ἶ℟קẵק∕ଆ⊾
18. Copyright © 2012 FITPI. All rights reserved. /mini?module=<module>&type=<css|js> 18 ℯόթ౼ٚൔ
    ቋཬ߄
19. Copyright © 2012 FITPI. All rights reserved. 19 ྩڿభ
    ⃪౰ਈӑ؟
20. Copyright © 2012 FITPI. All rights reserved. 20 ྩڿᗥ
    նږ㦆ഒ⃪౰ਈ
21. Copyright © 2012 FITPI. All rights reserved. 21 ‣↮ğ.JOJ ๏ ⃪༯≘
    NJOJa
    ࢳ⇭⅜֞
    $="QQ4FSW=XXX=MJC IUUQGFDMBTTDPNMBCQFSGPSNBODFNJOJ[JQ ๏ ᄝ
    "QBDIF
    ℟קẵ䥰ᄹࡆ‥ྛ
    ླᇗ⬏ "MJBT
    NJOJ
    $="QQ4FSW=XXX=MJC=NJOJ=NJOJ@XFCQIQ 4FU&OW
    %&7@3005
    $="QQ4FSW=XXX ๏ ྍᄹ၂ἠ
    .JOJ
    ℟קẵaᄹࡆ၂ུ
    +4$44
    ẵ $="QQ4FSW=XXX=DPOG=NJOJ=NJOJYNM ๏ Ⴈၛ༯ٚൔुु൞ڎႵ℟קӮۿğ IUUQMPDBMIPTUNJOJ UZQFUZQFNPEVMFNPEVMF
22. Copyright © 2012 FITPI. All rights reserved. ⇢≢
    
    .JOJGZ ๏ IUUQDPEFHPPHMFDPNQNJOJGZ ๏ .JOJ
    ൞๩Ἶ℟קẵa֌
    .JOJGZ
    ≣൞ᆰࢤạ↌ ᆶᆷקb ๏ ∻
    :6*
    $PNCP
    )BOEMFS
    ֥ቔم၂ᇁ ๏ ὜Ⴕ
    (&5
    ṵ؇ཋᇅ↜ⅳ
    ,
    _
    , b 22 http://<your host>/minify?f= ẵσ
    1
    ֥ਫ਼῅
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ẵσ
    2
    ֥ਫ਼῅
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ẵσ
    n
    ֥ਫ਼῅
23. Copyright © 2012 FITPI. All rights reserved. 23 ‣↮ğ.JOJGZ ๏ ⃪༯≘
    NJOJGZa
    ࢳ⇭⅜֞
    $="QQ4FSW=XXX=MJC IUUQGFDMBTTDPNMBCQFSGPSNBODFNJOJGZ[JQ ๏ ᄝ
    "QBDIF
    ℟קẵ䥰ᄹࡆ‥ྛ
    ླᇗ⬏ "MJBT
    DPNCP
    $="QQ4FSW=XXX=MJC=NJOJGZ=NJO= ๏ ྩڿ℟קẵ $="QQ4FSW=XXX=MJC=NJOJGZ=NJO=DPOGJHQIQ ๏ Ⴈၛ༯ٚൔुु൞ڎႵ℟קӮۿğ IUUQMPDBMIPTUDPNCP GGJMF GJMF GJMF
24. Copyright © 2012 FITPI. All rights reserved. 24 ↥ቅೖ≘ೆ TDSJQU
    TSD
    ၛຓ֥ٚൔ ⃸
    +BWB4DSJQU
    ≘ೆ֥۷ⅆṹ /POCMPDLJOH
    +BWB4DSJQU
25. Copyright © 2012 FITPI. All rights reserved. ≘ೆຓ҆
    4DSJQU 25 ๏ ҂ܵ൞
    TDSJQU
    TSD
    ࠇ
    MJOL
    ISFG
    ׻὜؁ೖᗥ⇟ ⤨ಸ֥↾ൕb ❖ http://f2eclass.com/lab/performance/blocking- javascript.html ๏ ֌ཞ൞
    (PPHMF
    "OBMZUJDT
    ࠇ
    'BDFCPPL
    4PDJBM
    1MVHJO
    ิ܂ⅶೆ୆↌ᅟ֥ჰ൓׻҂὜؁ೖb ๏ ὕὸ֤
    EPDVNFOUDSFBUF
    ॖၛࡹ৫ᾳề֥ٚൔ Ĥၛ≾∄֥ٚൔ≘ೆຓ҆
    4DSJQU
    ࣼॖၛх૧؁ ೖb
    
26. Copyright © 2012 FITPI. All rights reserved. ཟ
    '#
    ⇥↮↥؁ೖ 26 <script type=”text/javascript”> (function () { var el = document.createElement("script"); el.type = "text/javascript"; el.src = "要載⼊入 JavaScript 的 URL"; el.async = true; document.getElementsByTagName("head")[0].appendChild(el); }()); </script> http://f2eclass.com/lab/performance/non-blocking-javascript.html
27. Copyright © 2012 FITPI. All rights reserved. 27 *NBHF-PBEFS ൐Ⴈ
    :6*
    ֥
    *NBHF
    -PBEFS
    ۽ऎ㦆ഒồ౼҂сေ֥ⅾẵ
28. Copyright © 2012 FITPI. All rights reserved. 28 Ⴕޓ؟ⅾோ֥∉૫ ๏ ೏↌∉ᇏႵޓ؟ⅾோč২ೂữ২↌ᅟĎa໡ⁿ ׻Ⴈẖⅼ
    JNH
    TSD
    ቓ≘ೆbằồ౼Վ↌∉ℭ ෮Ⴕ֥ⅾோ׻൞၂⟸༯≘֥b ๏ ֌൐Ⴈᆀॖିᆺुഒ҆ٳ֥ⅾa㢻ु֥֞ⅾࣼ শỷਔ≘ೆ֥ੀਈਔ ๏ :6*
    ֥
    *NBHF-PBEFS
    ۽ऎğằ൐Ⴈᆀॹ⚂֞ ॖ൞⃯თຓ֥ⅾோℭaҌῘ൓≘ೆb
29. Copyright © 2012 FITPI. All rights reserved. :6*
    ֥
    *NBHF-PBEFS ๏ х૧൐Ⴈ
    JNHaڿႨ
    EJWaᾞⅾẵਫ਼῅ၛ
    TUZMF
    ֥
    CBDLHSPVOEJNBHF
    ℾྟ℟קb ๏ ቅᆸⅾோ↾ൕğᄝ
    $44
    ᇏ℟קⅾோ㬪
    CBDLHSPVOE
    OPOF
    JNQPSUBOU
    ๏ :6* VTF
    ൐Ⴈ
    JNBHFMPBEFS
    ଆ⊾ ๏ OFX
    :*NH-PBE(SPVQ \
    
    
    
    GPME%JTUBODF
    ὖẈ⃯ए 
    
    
    
    DMBTT/BNF
    EJW
    ֥
    DMBTT/BNF ^  29 ‣↮ğhttp://f2eclass.com/lab/performance/imageloader.php
30. Copyright © 2012 FITPI. All rights reserved. 30 ིି
    
    3FWJFX ๏ భ؊ᅝਔ
    
    ֥ồ౼ℭᾇb ๏ ೂޅᾋṦ↌∉ིିğ:4MPX
    
    1BHF4QFFE ๏ భ؊Ⴕଧུӈᾖིି⇊ଢĤ ๏ ೂޅॹ෎ڿΆ≾ིུିĤ
31. Copyright © 2012 FITPI. All rights reserved. 31 Q & A