1. 首頁
  2. 新聞資訊

新聞資訊

13 2014 03月(yuè)

[轉載]雅虎35條優化(huà)黃(huán∞±≠♦g)金(jīn)守則（二）

by DareWe

13、Gzip壓縮文(wén)件(jiàn)內(n∑ èi)容 
  網絡傳輸中的(de)HTTP請∑©±©(qǐng)求和(hé)應答(dá)時(shí)間(jiān)®©↔可(kě)以通(tōng)過前端機(jī)制(zhì)得(ε§☆δde)到(dào)顯著改善。的(de)确，終端用(yòn©✘"¶g)戶的(de)帶寬、互聯網提供者、與對(duì)等交換點的(d→¥₽e)靠近(jìn)程度等都(dōu)不(bù©"↕×)是(shì)網站(zhàn)開(kāi)發者所能(néng$δ>∏) 決定的(de)。但(dàn)是(shì)還(hái)✔×δ&有(yǒu)其他(tā)因素影(yǐng)♠∏∑響著(zhe)響應時(shí)間(jiān)。通(tōng)過減®"€小(xiǎo)HTTP響應的(de)大(dà)小(xiǎo)可↔πδ•(kě)以節省HTTP響應時(shí)間(jiā&→λn)。
  從(cóng)HTTP/→♦1.1開(kāi)始，web客戶端都(dōu)默認支持↕§•HTTP請(qǐng)求中有(yǒu)Accept-Encoding₽≥β÷文(wén)件(jiàn)頭的(de)壓縮格式：  ÷± 
      A​£ccept-Encoding: gzip,σ  deflate 
  如(rú)果web服務器(qì)§ ↑在請(qǐng)求的(de)文(wén)件(jiàn)♥∏ 頭中檢測到(dào)上(shàng)面的(de)代★§✘碼，就(jiù)會(huì)以客戶端列出的‍>(de)方式壓縮響應內(nèi)容。Web服務器(qì)把壓縮方式€≥• 通(tōng)過響應文(wén)件(jià<​n)頭中的(de)Content- Encoding來(lái)返回給浏覽器≤×(qì)。
      Content-Eγ ncoding: gzip 
  Gzip是(shì)目前最流∏≤ ¶行(xíng)也(yě)是(shì)最有(yǒ'₹‍u)效的(de)壓縮方式。這(zhè)是(shì)由GNU項目開(kāiλ≥π©)發并通(tōng)過RFC 1952來(lái)标準化(huà)的(de)<∑£→。另外(wài)僅有(yǒu)的(de)一(yī)個(gè)壓縮格式'δ♥​是(shì)deflate，但(dàn)是(shì)它¥"₩的(de)使用(yòng)範圍有(yǒu)限效果也(yě)稍稍遜色。™σ$&
  Gzip大(dà)♣↓♥概可(kě)以減少(shǎo)70%的(dγ★e)響應規模。目前大(dà)約有(yǒu)90%通(tōng)過浏覽器(£ε•qì)傳輸的(de)互聯網交換支持gzip格式。如( Ωφ¶rú)果你(nǐ)使用(yòng)的(de)是(shì) ↕Apache，gzip模塊配置和(hé) 你(nǐ)的(de)版本有(λ∞'↔yǒu)關：Apache 1.3使用(yòng)mod_zip，而←♠Apache 2.x使用(yòng)moflate。
  浏覽器(qì)和(hé)代理(lǐ)都(dōu)會(h♣γ←uì)存在這(zhè)樣的(de)問(wèn)題：浏覽器(qì)期望收到("₽dào)的(de)和(hé)實際接收到(dào)的(de)內(nèi∏✔)容會(huì)存在不(bù)匹配的(de↓​♥§)現(xiàn)象。幸好(hǎo)，這(zhè)種特殊情況随著(£​★>zhe)舊(jiù)式浏覽器(qì)使用(yòng↓ ¶)量的(de)減少(shǎo)在減少(shǎo)。 Aσ ¥∑pache模塊會(huì)通(tōng)過自(zì ‌)動添加适當的(de)Vary響應文(wén)件(jiπ♣àn)頭來(lái)避免這(zhè)種狀況的(de)出現(★≠¥xiàn)。
  服務器(qì)根據文(wén)件×€(jiàn)類型來(lái)選擇需要(yà§>↕o)進行(xíng)gzip壓縮的(de)文(wén₹π)件(jiàn)，但(dàn)是(shì)這(z≈δ↔hè)過于限制(zhì)了(le)可(kě)壓縮的(de)文(wén₹™)件(jiàn)。大(dà)多(duō)數(shù)web服務器(q δ∑‌ì)會(huì)壓縮HTML文(wén)檔。對(duì)₹•‌ 腳本和(hé)樣式表進行(xíng)壓縮同 樣也(yě)是(shì)$≈值得(de)做(zuò)的(de)事(shì± ±★)情，但(dàn)是(shì)很(hěn)多‌∞(duō)web服務器(qì)都(dōu)沒有(yǒu)這(z← δ hè)個(gè)功能(néng)。實際上(shàng)，壓縮任何∑←一(yī)個(gè)文(wén)本類型的("φ↑de)響應，包括XML和(hé)JSON，都(dōu)值得(de)的(de)。<'∏≤圖像和(hé)PDF文(wén)件(jiàn)由于 ​∑已經壓縮過了(le)所以不(bù)能(n•ασγéng)再進行(xíng)gzip壓縮。如(rú&β±)果試圖gizp壓縮這(zhè)些(xiē)±®文(wén)件(jiàn)的(de)話(huà)不(bù)但(d≠α₩àn)會(huì)浪費(fèi)CPU資源還(hái)會(huì)增加∏∏×♥文(wén)件(jiàn)的(de)大(dβ>​λà)小(xiǎo)。 
   Gzip壓縮所有(yǒu)可(kě)能(××←δnéng)的(de)文(wén)件(jiàn)類型是(shì)減少(shǎ✔>™ o)文(wén)件(jiàn)體(tǐ)積增加用(yòng)戶體(tǐ)驗∏♣♥"的(de)簡單方法。


14、配置ETag 
  Entity tags（ETags）（實體(tǐ)€¶∏ 标簽）是(shì)web服務器(qì)和(hé)浏覽器(qì)用(yòn$γ♣g)于判斷浏覽器(qì)緩存中的(de)內(nèi)容和ε≠↕(hé)服務器(qì)中的(de)原始內(nèi)容是(shì)否Ωβ匹配的(de)一(yī)種機(jī)制(zhì)（“實體(tǐ)”就(j✘→×iù)是(shì)所說(shuō)的(de)“內(nè ≠♣i) 容”，包括圖片、腳本、樣式表等）。增加ETag為(wèi)實體±‌÷✔(tǐ)的(de)驗證提供了(le)一(yī)個(gè)✔¥比使用(yòng)“last-modified date（上(shàng)次∞§編輯時(shí)間(jiān)）”更加靈活∞®‌★的(de)機(jī)制(zhì)。Etag是(shì ®↔€)一(yī)個(gè)識别內(nèi)容版本号的(de)唯一(yī)字符串。β ↕↓唯一(yī)的(de)格式限制(zhì)就(j♦♥<iù)是(shì)它必須包含在雙引号內(nèi)。原始→‍服務器(qì)通(tōng)過含有(yǒu) ETag≈σ文(wén)件(jiàn)頭的(de)響應指定頁面內(nèi)容γ≥δΩ的(de)ETag。 
      HTTP/1.1 20↓★ε0 OK
      Last-M♣↕odified: Tue, 12 Dec 2006 03:03↓ > :59 GMT
     &n π↔bsp;ETag: "10c24bc-4ab-457e1c1f"∞α‌"
      •♣Content-Length: 12195
  稍後，如(rú)果浏覽器∏α' (qì)要(yào)驗證一(yī)個(gè)文(wén)件(jiàn¶↔←ε)，它會(huì)使用(yòng)If-None-Match文∑∑π∏(wén)件(jiàn)頭來(lái)把ETag傳回給原↔↑始服務器(qì)。在這(zhè)個(gè)例子(α£'&zǐ)中，如(rú)果ETag匹配，就(jiù)會(huì)返π≤↑€回一(yī) 個(gè)304狀态碼，這(zhè)就(j÷≠'iù)節省了(le)12195字節的(de)響應。   ×↓&<   GET /i/yahΩγ≠≥oo.gif HTTP/1.1
      Host: us↕→≥←.yimg.com
      If-Modifα•ied-Since: Tue, 12 Dec 2006'§​± 03:03:59 GMT
     &n≈≤bsp;If-None-Match: "10♦ c24bc-4ab-457e1c1f"
      HTTP ‍'/1.1 304 Not Modified
  ETag的(de)問(wε↓π♠èn)題在于，它是(shì)根據可(kě)以辨别網站(zhàn)所在的(d£λ e)服務器(qì)的(de)具有(yǒu)唯一(y§♠ī)性的(de)屬性來(lái)生(sh±↓£ ēng)成的(de)。當浏覽器(qì)從(α÷cóng)一(yī)台服務器(qì)上(shàng)獲得(de)↓≠頁面內(nèi)容後到(dào)另外(wài)一(y±©"↑ī)台服務器(qì)上(shàng)進行(xíng)←↑™驗證時(shí) ETag就(jiù)會(huì)§β★♠不(bù)匹配，這(zhè)種情況對(duì)于使用(yòng)服<≈務器(qì)組和(hé)處理(lǐ)請(qǐng)求的(de)網站(↑α'¶zhàn)來(lái)說(shuō)是(shì)非常常見(j •iàn)的(de)。默認情況下(xià)，Apache和(hé)&"IIS都(dōu)會(huì)把數(shù)據嵌入ETag中，這(zhè)• ≤→會(huì)顯著 減少(shǎo)多(duō)服務器(qì)間(jλ≤iān)的(de)文(wén)件(jiàn)☆≤λ驗證沖突。
   Apache 1.3和(hé)2.x中的(de)E↑♦Tag格式為(wèi)inode-size-timestampπ₹。即使某個(gè)文(wén)件(jiàn)在不(bù)同的(de)服務器(qλ‌₽ì)上(shàng)會(huì)處于相(xiàng)同的(>φ'de)目錄下(xià)，文(wén)件(jiàn)大(dà)小(xiǎo)ε×、權限、時(shí)間(jiān)戳 等都(dōu)完全相(xσ↑♦iàng)同，但(dàn)是(shì)在不(α &bù)同服務器(qì)上(shàng)他(tā)們 ₹∑&的(de)內(nèi)碼也(yě)是(shì)不(bù)同&π >的(de)。 
  IIS 5.0和(hé)IIS¥&'≥ 6.0處理(lǐ)ETag的(de)機(jī)制(zhì)相(xiàn↕δ≠g)似。IIS中的(de)ETag格式為(wèi)Filetime¶♣stamp:ChangeNumber。用(yλ‌ εòng)ChangeNumber來(lá ™≠σi)跟蹤 IIS配置的(de)改變。網站(zhàn)所用(yòn©♥g)的(de)不(bù)同IIS服務器(qì)間∑×♣(jiān)ChangeNumber也(yě)不(bù)相(xi≤¶àng)同。不(bù)同的(de)服務器(qì)上(s∏☆δhàng)的(de)Apache和(hé)IIS即使對(duì)于Ω≤←完全相(xiàng)同的(de)內(nèi)容産生(♠πshēng)的(de) ETag在也(yě♣®✔)不(bù)相(xiàng)同，用(yòng)戶并不(bù)會 ∞←λ(huì)接收到(dào)一(yī)個(gè)小(↔αxiǎo)而快(kuài)的(de)304響應；相(xiàng)反他(tā)們∑​§會(huì)接收一(yī)個(gè)正常的(de)200響應并下(xià)±π≠載全部內(nèi)容。如(rú)果你(nǐ)的(de)網♣©站(zhàn)隻放(fàng)在一(yī)台服務器(qì)♣‍β≤上(shàng)，就(jiù) 不(bù)≥ 會(huì)存在這(zhè)個(gè)問(wèn)題。但(dàn)是(shì§λ♦)如(rú)果你(nǐ)的(de)網站(zh≤↔¶àn)是(shì)架設在多(duō)個(gè)服務器(qì)δγ上(shàng)，并且使用(yòng)Apache和(hé) IIS産↑☆§↑生(shēng)默認的(de)ETag配置，你(nǐ)的ε¶"(de)用(yòng)戶獲得(de)頁面就(jiù)會(huì)相(xi♦׶←àng)對(duì)慢(màn)一(yī)點，服務器(qì)會(huì)傳輸更€¥βα多(duō)的(de)內(nèi)容，占用(yòng)更多(du↓&☆ō)的(de)帶寬，代理(lǐ)也(yě)不(bù)會(h∑₹& uì)有(yǒu)效地(dì)緩存你(nǐ)的(de)網站✔¶Ω✘(zhàn)內(nèi)容。即使你(nǐ)的(de) 內(nèi)容擁有↔♦γ(yǒu)Expires文(wén)件(jià÷"n)頭，無論用(yòng)戶什(shén)麽時(shí)候點≥¶±擊“刷新”或者“重載”按鈕都(dōu)會(huì)發送 &相(xiàng)應的(de)GET請(qǐng)求。
   如(rú)果你(nǐ)沒有(yǒ≈♥♥u)使用(yòng)ETag提供的(de)靈活的(de)驗證模σ←≤↕式，那(nà)麽幹脆把所有(yǒu)的(de)ET§'≥ag都(dōu)去(qù)掉會(huì)更好(hǎo)。Last-Modiβ✘fied文(wén)件(jiàn)頭驗證是(shì≥✔♥)基于內(nèi)容的(de)時(shí)間(j ∏iān)戳的(de)。去(qù)掉 ETag文(wén)件(jiàn)頭≥✔↔會(huì)減少(shǎo)響應和(hé)下(xià)‌≠次請(qǐng)求中文(wén)件(jiàn)的(de)大(dà)小"€β(xiǎo)。微(wēi)軟的(de)這(zhè)篇支持文(wén)稿講述了( ™₩le)如(rú)何去(qù)掉ETag。在≈>≤™Apache中，隻需要(yào)在配置文(wén®→)件(jiàn)中簡單添加下(xià)面∑× ε一(yī)行(xíng)代 碼就(jiù)可₽δ(kě)以了(le)：
      FileETag n₽¥one


15、盡早刷新輸出緩沖 
  當用(yòng)戶請(qǐng)求一(yī)個(gè)∏≈δ頁面時(shí)，無論如(rú)何都(dōu™↔€)會(huì)花(huā)費(fèi)200到(dàoγ÷)500毫秒(miǎo)用(yòng)于後台組織↔÷HTML文(wén)件(jiàn)。在這(zhè)期間(jiān)，浏覽器(q←'♠σì)會(huì)一(yī)直空(kōng)閑等待£→‍↔數(shù)據返回。在PHP中，你(nǐ) ‌​≤可(kě)以使用(yòng) flush()方法，它允許你(​→nǐ)把已經編譯的(de)好(hǎo)的(de)部分(fēn)HTML響應文∑×(wén)件(jiàn)先發送給浏覽器(qì)，這(zhè)時(shí↔‌)浏覽器(qì)就(jiù)會(huì)可(kě)以下(xi∑♠₹≠à)載文(wén)件(jiàn)中的(de)內(↕δ‍♣nèi)容（腳本等）而後台同時(shí)處理(lǐ)剩餘的(de) HΩ&TML頁面。這(zhè)樣做(zuò)的(de)σ× 效果會(huì)在後台煩惱或者前台較空(kōng)閑時(shí)更∞ ¥加明(míng)顯。
  輸出緩沖應用(yòng)最≈>©好(hǎo)的(de)一(yī)個(gè)地'←(dì)方就(jiù)是(shì)緊跟在&l$βt;head />之後，因為(wèiφεφ)HTML的(de)頭部分(fēn)容易生(shēn★÷∞ g)成而且頭部往往包含CSS和(hé)Jav 'aScript文(wén)件(jiàn)，這(zhè)樣浏覽器(qì)就(&βjiù)可(kě)以在後台編譯剩餘HTM♠¥•L的(de)同時(shí)并行(xíng)下(xià) 載它們。 例σ↕子(zǐ)：

     &nbs©€®₹p;... <!-- css, js -->
        &nbsβ★≠&p; </head>
         ★λ <?php flush(); ?>
         ≥© <body>
      §<;... <!-- content -->

為(wèi)了(le)證明(míng)≠ ♥使用(yòng)這(zhè)項技(jì)術(sh®λ ù)的(de)好(hǎo)處，Yahoo!搜索率先研究并完成了(le)用♦ (yòng)戶測試。


16、使用(yòng)GET來(lái)完成AJAX請(qǐng)求&∞®₩nbsp;
  Yahoo!Mail團隊發現(xiàn)，當使用☆↕α(yòng)XMLHttpRequest時(shí)，浏覽器(qì)↓>♣ 中的(de)POST方法是(shì)一(yī)個(gè)“兩步走”的(λ"de)過程：首先發送文(wén)件(jiàn)頭，然後才>→發送數(shù) 據。因此使用(yòng)GET最為™∏(wèi)恰當，因為(wèi)它隻需發送一 $λ→(yī)個(gè)TCP包（除非你(nǐ)有(yǒu)很(hěn)多(<↑εduō)cookie）。IE中URL的(de)最∞≈大(dà)長(cháng)度為(wèi)2K，因此σ÷δ如(rú)果你(nǐ)要(yào)發送一(yī)÷π±個(gè)超過2K的(de) 數(shù)據時( ≤≈shí)就(jiù)不(bù)能(néng↕σΩ♠)使用(yòng)GET了(le)。
  一(yī)個(gè)有(yǒu)>‍趣的(de)不(bù)同就(jiù)是(shì)POS¶±T并不(bù)像GET那(nà)樣實際發送數(shù)據。根據✘πλ§HTTP規範，GET意味著(zhe)“獲取”數(shù)據£€÷‍，因此當你(nǐ)僅僅獲取數(shù)據時(shí)使用∞ ≥'(yòng)GET更加有(yǒu)意義 （從(cóng)語意"∑±上(shàng)講也(yě)是(shì)如(rú)此），相(xiàε'λng)反，發送并在服務端保存數(shù)據時(shí)使✔₹‌用(yòng)POST。


除此之外(wài)，JavaScript和(hé)CSS也(yě)是(s≠±βhì)我們頁面中經常用(yòng)到(dào)的(d♦$≠e)內(nèi)容，對(duì)它們的(de)優化(h>≤≠uà)也(yě)提高(gāo)網站(zhàn)性能(néng)的(de‌↕→₹)重要(yào)方面：


35、避免空(kōng)的(de)圖像來(lái)源 &

一(yī)個(gè)src屬性為(wèi‌✘×')空(kōng)串的(de)圖像有(yǒu)兩種情況：

1． 直接的(de)HTML

<img src="">

2． JavaScript

var img = new Image();
img.src = "";


這(zhè)兩種情況都(dōu)會(huì)引起同♠"樣的(de)效果：浏覽器(qì)會(huì)再次‌✘γ∞向你(nǐ)的(de)服務器(qì)發出請(qǐnγ∏αg)求。

  • Internet Explorer 将向這(zhè)個(gè)頁>‌ β面所在的(de)目錄發出一(yī)個(gè)請(q↕₽>$ǐng)求
  • Safari and Chrome 将發出對(duì)這(zhè£<↓)個(gè)頁面的(de)一(yī)個(gè)請(qǐng)求。
  • Firefox 3 和(hé)更早的(de)版$γ×✘本所采取的(de)動作(zuò)和(hé)Safar≤₩i and Chrome一(yī)樣，但(dàn)是(shì) 3✔₹.5版本 addressed this issue™'[bug 444931] and no longer sends a request. ★<£
  • Opera 不(bù)進行(xíng)任何操作(zuò)。

這(zhè)個(gè)行(xíng)為(wèi)為(wèi)何是(shì)不δ"(bù)好(hǎo)的(de)？

1、 發送大(dà)量突然的(de)請(qǐng)求将使你(n↓ ǐ)的(de)服務器(qì)宕機(jī)§∏₩Ω（Cripple your servers），尤其是(s≤>​•hì)每天有(yǒu)數(shù)百萬訪問(wèn)量的(de)頁面。

2、 産生(shēng)一(yī)個(gè)從(có£‌∞εng)未浏覽過的(de)頁面将浪費(fèi)服務器(↓♠★qì)的(de)計(jì)算(suàn)周期（computin™≥×÷g cycles）

3、 損壞用(yòng)戶數(shù)據•‍。如(rú)果你(nǐ)在請(qǐng)求中追蹤狀态（以≠'<•cookie或是(shì)其他(tā)的(d€∑βe)方式），你(nǐ)可(kě)能(néφ↕↑'ng)會(huì)損壞數(shù)據。即使這(zhè←¥)個(gè)圖像請(qǐng)求并沒有(yǒu)返回一(yī)個(g<÷è)圖像，所有(yǒu)的(de)頭被浏覽器(qì)讀(dú)取并接‌"♦ 受，包括所有(yǒu)cookie。While the rest of th®≈₹πe response is thrown away, th™×¶←e damage may already be don✘‌↕εe.

引起這(zhè)種行(xíng)為(wèi)的(de)根源在于浏覽器(qì)✘∑☆↔中URI的(de)解析方式。這(zhè)種行(xíng)為(wèi)定→‌‍義在RFC 3986 - Uniform Resource Identi¥£εfiers.當一(yī)個(gè)空(kōng)串¥$σ←作(zuò)為(wèi)一(yī)個(gè)URI時(shí)¶ ，它被認為(wèi)一(yī)個(gè)相( ∑× xiàng)對(duì)URI（relative URI）并<×通(tōng)過定義在section 5.•σ2中的(de)算(suàn)法被解析。這(zhè)個(gè)特例Ω×Ω，一(yī)個(gè)空(kōng)串，列在section 5.​♦>↑4當中。Firefox, Safari, and Chrome÷&£都(dōu)是(shì)依據這(zhè)一(y₽γ∞✔ī)規格來(lái)解析空(kōng)串，而IntΩ>ernet Explorer則不(bù)正确的(de$☆)解析這(zhè)個(gè)串，符合更早的(de)一(yī)個(gè∞≤)規範，RFC 2396 - Uniform Resource I䧥dentifiers (this was obsoleted Ω✘¶by RFC 3986).所以技(jì)術(shù)上(shàng)，浏覽器✔' ↔(qì)都(dōu)在做(zuò)它們被期望所做(ε×​zuò)的(de)事(shì)情來(lái)解析relative Uσ∏RIs，問(wèn)題是(shì)在這(zhè)個(gè)範圍，空(kō≠♣ng)串不(bù)是(shì)故意造成的(∞<de)。


HTML5 adds to the description of t←<¥he file:///C:/Users/Prayer/AppData/Loα♥cal/Temp/msohtmlclip1/♥•01/clip_image001.giftag'↑↓s src attribute to instruc© t browsers not to make an additional r♠∞≥equest in section 4.8.2:

    The src attribute must bφσ₹Ωe present, and must ↕'contain a valid URL refe★ rencing a non-interactive, opti♦β→↑onally animated, imag$₩♦e resource that is neith∏φ™↓er paged nor scripted. If the←​λ§ base URI of the element ®™☆€is the same as the document's a$₩★ddress, then the src attribute's ₽ value must not be the empty string.

非常希望浏覽器(qì)在将來(lái)不(bù)會(huì)有(yǒu)這≤←(zhè)樣的(de)問(wèn)題。不(bù)幸的(d§☆÷×e)是(shì)，沒有(yǒu)為(wèi)<scripδ ‌t src=""> and <link href="">的→α&≤(de)條款。或許仍需要(yào)時(shí)間(jiān)™γ來(lái)做(zuò)出調整以保證浏覽器(qì)不(bù)會(huì)意外(φ<★↕wài)的(de)實現(xiàn)這(zhè)一(yī)行(xíng∞★₽)為(wèi)。

這(zhè)一(yī)規則是(shì)受雅虎±∑•↓JavaScript導師(shī)Nicolas C. Z¶↓©©akas啓發。更新信息請(qǐng)參見(jiàn)Empty image src can destroy your siteα ₽..

三、CSS部分(fēn)

  • 把樣式表置于頂部
  • 避免使用(yòng)CSS表達式（Expressio‌★n）
  • 用(yòng)<link>代替@import
  • 避免使用(yòng)濾鏡

17、把樣式表置于頂部 
  在研究Yahoo!的(d✘ e)性能(néng)表現(xiàn)時(shí)，我們發現(x‍×€φiàn)把樣式表放(fàng)到(dào)文(wén)檔的(de)∏€∏<head />內(nèi)部似乎會(huì)加快(kuà<§i)頁面的(de)下(xià)載速度。這§≈(zhè)是(shì)因為(wèi)把樣式表放(fàn€​​g)到(dào)<head />內(n©↕èi)會(huì)使頁面有(yǒu)步驟的(de)加載顯示。
  注重性能(néng)的ε λ(de)前端服務器(qì)往往希望頁面有(yǒu)±ε©秩序地(dì)加載。同時(shí)，我們也(yě)希望浏覽器(>‍®qì)把已經接收到(dào)內(nèi)容盡可(kě)能(néφ∞↑ng)顯示出來(lái)。這(zhè)對(duì)于擁有(yǒu)較多("π≤σduō)內(nèi)容的(de)頁面和(hé)網速&•>較慢(màn)的(de)用(yòng)戶來(lái)說(shuō) ₩₩✔π特别重要(yào)。向用(yòng)戶返回可(kě)視(shβ≈ì)化(huà)的(de)反饋，比如(rú)進程指針，已經有(>♣♦yǒu)了(le)較好(hǎo)的(de)研究并形成¶↔了(le)正式文(wén)檔。在我們的(de)研究中HTML頁面就(∞"™jiù)是(shì)進程指針。當浏覽器(qì)有(yǒu♣↕♣)序地(dì)加載文(wén) 件(ji₽∏"πàn)頭、導航欄、頂部的(de)logo等對(duì)✔ λ于等待頁面加載的(de)用(yòng)戶來(lái)說(shuō)都(dōu)σ™​可(kě)以作(zuò)為(wèi)可(kě)視(sΩ≥hì)化(huà)的(de)反饋。這(zhè)從(cóng)≠¥整體(tǐ)上(shàng)改善了(le)用(yòng)戶 ☆‍體(tǐ)驗。
  把樣式表放(fàng)在文(wénΩ€α≤)檔底部的(de)問(wèn)題是(shì)在♦¶∏↔包括Internet Explorer在內(n✘β✔γèi)的(de)很(hěn)多(duō)浏覽器(qì)中這(zhè)會(hu'₹®¶ì)中止內(nèi)容的(de)有(yǒu)序呈現(xi≤'™×àn)。浏覽器(qì)中止呈現(xiàn)是(shì)為(wèi£✔δ)了(le)避免樣式改變引起的(de)頁面元素重繪。用(yòng)戶不(bù ™)得(de)不(bù)面對(duì)一(yī)個(gè)空(kō÷<ng)白(bái)頁面。
   HTML規範清楚指出樣式表要(yào)放(fàng>∞÷γ)包含在頁面的(de)<head />區(qū)域內(n&₽☆èi)：“和(hé)<a />不α✘✔&(bù)同，<link />隻≥∞®$能(néng)出現(xiàn)在文(wén)檔的(d♣∏e)<head />區(qū)域內(nèi)，盡管它‌δ←可(kě)以多(duō)次使用(yòng)它”。無論是 ←λ(shì)引起白(bái)屏還(hái)是(shì)出現(xiàn)沒有(yǒ₩γ§u)樣式化(huà)的(de)內(nèi)容都(dōu)不♠↓•±(bù)值得(de)去(qù)嘗試。最好(hǎo)的←<(de)方案就(jiù)是(shì)按照(zhào)HTML規範在文(§σ≤wén) 檔<head />內(nèi)加載你(nǐ)的≤§'(de)樣式表。


18、避免使用(yòng)CSS表達式（Expression）&n€γ¥bsp;
  CSS表達式是(shì)動>÷态設置CSS屬性的(de)強大(dà)（但(dàn)₩↓££危險）方法。Internet Explorer從(cóng)§‌₹↕第5個(gè)版本開(kāi)始支持CSS表達式。下(xià)面的(✘​₩©de)例子(zǐ)中，使用(yòng)C®​↓SS表達式可(kě)以實現(xiàn)隔一(yī)個‌→★φ(gè)小(xiǎo)時(shí)切換一(yī)次背景顔色：
     &∑∑nbsp;background-color: expre㶶£ssion( (new Date()).getHours()%2 ? "♦λ÷<#B8D4FF" : "#F08A00" ); 
如(rú)上(shàng)所示，expression中使用©© "(yòng)了(le)JavaScript表達式。CSS"§©屬性根據JavaScript表達式的(de)計(jì)算(suàn)結果來(γ↑lái)設置。expression 方法在其它浏覽器(qì)中不(bù)起作  (zuò)用(yòng)，因此在跨浏覽器(q₽ ì)的(de)設計(jì)中單獨針對(duì)Interne☆↕t Explorer設置時(shí)會(huì)比較有(yǒu)用(y​✔φòng)。
  表達式的(de)問(wèn)題"δ就(jiù)在于它的(de)計(jì)算(suàn)頻(pín)率要(yà©™ ₹o)比我們想象的(de)多(duō)。不(bù)僅僅是(sh​'→ì)在頁面顯示和(hé)縮放(fàng)時(sπ≥ ✘hí)，就(jiù)是(shì)在頁面滾動、乃至移動鼠标時(shí)都↓∏(dōu)會(huì)要(yào)重新計(jì)算(suàn)一(yī)次£↔。給CSS表達式增加 一(yī)個(gè)計(jì)數(shù)器(qì)可(‍​¶↕kě)以跟蹤表達式的(de)計(jì)算(suàn)頻(pín•¥₹)率。在頁面中随便移動鼠标都(dōu)可(kě♠>↔✔)以輕松達到(dào)10000次以上(shàng)的(de)計(jì)算(s"∏∞×uàn)量。
  一(yī)個(gè)減少(shǎo)CS→©₩•S表達式計(jì)算(suàn)次數(shù)的(de)方法就(jiù)是(sβ÷ hì)使用(yòng)一(yī)次性的(de)表達式，它在第一₹®(yī)次運行(xíng)時(shí)将結果賦給指定的→→(de)樣式屬性，并用(yòng)這(zhè)個(gè)屬'★性來(lái)代替CSS表達式。如(rú)果樣式屬性 必須在頁面周期內(♥αnèi)動态地(dì)改變，使用(yòng)事(shì)件(jiàn)句柄來$©±(lái)代替CSS表達式是(shì)一(yī)個(↓€"≈gè)可(kě)行(xíng)辦法。如(rú)¥λ果必須使用(yòng)CSS表達式，一(yī)定要(yàβ÷₽o)記住它們要(yào)計(jì)算(suàn)成千上(s×<♣♠hàng)萬次并且可(kě)能(néng)會(huì)對(duì)你(nǐ) ≥♠頁面的(de)性能(néng)産生(shēng)影(yǐng)響。


19、用(yòng)<link&g÷©¶t;代替@import 
  前面的(de)最佳實現(xià $βεn)中提到(dào)CSS應該放(fàng)置在頂端±→®以利于有(yǒu)序加載呈現(xiàn)。
  在IE中，頁面底部@import和(hé©∞∞)使用(yòng)<link>作(z♣‍uò)用(yòng)是(shì)一(yī)樣£ε™的(de)，因此最好(hǎo)不(bù)要(yào)使₽δ用(yòng)它。


20、避免使用(yòng)濾鏡 
  IE獨有(yǒu)屬性AlphaImag¶★eLoader用(yòng)于修正7.0以下(xδ'ià)版本中顯示PNG圖片的(de)半透明(≥$✔míng)效果。這(zhè)個(gè)濾鏡的(de)問(wèn)題在于浏∑β≥✔覽器(qì)加載圖片時(shí)它會(huì)終 ®止內(nèi)容的(de) 呈現(xiàn)并且凍Ω∞結浏覽器(qì)。在每一(yī)個(gè)元素（不(bù)僅僅是©®↕(shì)圖片）它都(dōu)會(huì)γ← •運算(suàn)一(yī)次，增加了(le)內(n÷♣φèi)存開(kāi)支，因此它的(de)問(wèn)題是(shì)多(•≠♣duō)方面的(de)。
  完全避免使用(yòng)AlphaImageLo✘✔$ader的(de)最好(hǎo)方法就(jiù)☆★∏是(shì)使用(yòng)PNG8格式來(lái)代§α>替，這(zhè)種格式能(néng)在IE中很(hěn &"‌)好(hǎo)地(dì)工(gōng)作(zuò)。如 ±ε(rú)果你(nǐ)确實需要(yào)使用€↔§(yòng) AlphaImageLoader，請(q₹∑∑ǐng)使用(yòng)下(xià)劃線_filδ↓$↕ter又(yòu)使之對(duì)IE7以上(shà★✔$ng)版本的(de)用(yòng)戶無效。


四、 JavaScript部分(fēn)

  • 把腳本置于頁面底部
  • 使用(yòng)外(wài)部JavaScript和(hé)CSS÷✘♠÷
  • 削減JavaScript和(hé)CSS
  • 剔除重複腳本
  • 減少(shǎo)DOM訪問(wèn)
  • 開(kāi)發智能(néng)事(shì∏ )件(jiàn)處理(lǐ)程序

21、把腳本置于頁面底部 
  腳本帶來(lái)的(de)問(wèn)題就(jiù)™÷•&是(shì)它阻止了(le)頁面的(de)平行(xíng)δ←"下(xià)載。HTTP/1.1 規範建議(yì)，浏覽器(qì)每個(gè)∑×主機(jī)名的(de)并行(xíng)下(xià)載內(nèi)容不(♠★ bù)超過兩個(gè)。如(rú)果你(nǐ)的(de)圖片放(fàng)在×®←∑多(duō)個(gè)主機(jī)名上(shàng)，≤​你(nǐ)可(kě)以在每個(gè)并行(§★xíng)下(xià)載中同時(shí)下(xià)載2個(gè)以上(s§€ hàng)的(de)文(wén)件(jiàn)。但(dàn)是(sh®§€ì)當下(xià)載腳本 時(shí)，浏覽器(qì)就$✔(jiù)不(bù)會(huì)同時(sh≠↓í)下(xià)載其它文(wén)件(jiàn)了(©‌le)，即便是(shì)主機(jī)名不(bù)相(✔←xiàng)同。
  在某些(xiē)情況下(x≈≤♥πià)把腳本移到(dào)頁面底部可(kě)能(néng★↔ γ)不(bù)太容易。比如(rú)說(shuō)λ≥®α，如(rú)果腳本中使用(yòng)了(le)document≤§.write來(lái)插入頁面內(nèi)容×γ✘π，它就(jiù)不(bù)能(néng)被往下(xià)移動了®×(le)。這(zhè)裡(lǐ)可(kě)能(néng)還(h•​ái) 會(huì)有(yǒu)作(zuò)用(yòng)域的(d± ✘ e)問(wèn)題。很(hěn)多(duō)情 ★•況下(xià)，都(dōu)會(huì)遇到(dào)這(δ zhè)方面的(de)問(wèn)題。
  一(yī)個(gè)經常用®™↓(yòng)到(dào)的(de)替代方法就(jiù)是(shì)使 ☆用(yòng)延遲腳本。DEFER屬性表明(míng)腳本中沒有α∞(yǒu)包含document.write，它告訴浏覽器(qì)繼續顯>∏示。不(bù)幸的(de) 是(shì)，Firefox并不‌‍£¥(bù)支持DEFER屬性。在Internet Ex∞≥≥∑plorer中，腳本可(kě)能(néng)會(huì)φ♦λ被延遲但(dàn)效果也(yě)不(bù)會(&"huì)像我們所期望的(de)那(nà)樣。如(rú)果腳本可(γ•‌‍kě)以被延遲，那(nà)麽它就(jiù)可©×δ(kě)以移到(dào)頁面的(de)底部。λ✔☆>這(zhè)會(huì)讓你(nǐ)的(de)頁面加載的(de)快(kuài맩•)一(yī)點。


22、使用(yòng)外(wài)部JavaScript和(hé™ α)CSS 
  很(hěn)多(duō)性能(néng)<≥★♣規則都(dōu)是(shì)關于如(rú)何處理(lǐ)外(w''ài)部文(wén)件(jiàn)的(de)。÷'ε但(dàn)是(shì)，在你(nǐ)采取這(zhè)些α♣'(xiē)措施前你(nǐ)可(kě)能(néng)會(huì)問(w  èn)到(dào)一(yī)個(gè)更基本的(de)問(wèn)題：Javδ ≈aScript和(hé)CSS是(shì)應該放(fàng)在外(wà✔εi)部文(wén)件(jiàn)中呢(ne) 還(hΩ®£✘ái)是(shì)把它們放(fàng)在頁面本身(shēn)之內(nèi)呢♠φ☆(ne)？
  在實際應用(yòng)中使用(yòng)©ε​外(wài)部文(wén)件(jiàn)可(kě)以提高(gāo)頁面速度，因‍→&為(wèi)JavaScript和(hé)CSS文(wλ→₹én)件(jiàn)都(dōu)能(néng)在←‌★浏覽器(qì)中産生(shēng)緩存。內(nèi)§​☆$置在HTML文(wén)檔中的(de)Java>γπ₩Script 和(hé)CSS則會(huì)在每次請‍✘↓(qǐng)求中随HTML文(wén)檔重新下(xià)πδ載。這(zhè)雖然減少(shǎo)了(le)HTTP請(qǐ$±ng)求的(de)次數(shù)，卻增加了(lγ≤e)HTML文(wén)檔的(de)大(dà)小(xiǎo)。從(c¥∞&​óng)另一(yī)方面來(lái)說(shuō)，如(rú)果外(wàiφΩ♠)部文(wén)件(jiàn)中的(de) JavaScript和(hé ✔ )CSS被浏覽器(qì)緩存，在沒有(yǒu)增加HTTP請(qǐng)求次數§€≠(shù)的(de)同時(shí)可(kě)以減少(shǎo)£≠¶γHTML文(wén)檔的(de)大(dà)小(xiǎo)。
  關鍵問(wèn)題是(shì)，外(wài)部Jβ&±$avaScript和(hé)CSS文(wén)件(j÷Ω$₩iàn)緩存的(de)頻(pín)率和(hé)請(qǐπ∑‌ng)求HTML文(wén)檔的(de)¥‍次數(shù)有(yǒu)關。雖然有(yǒΩ•₽u)一(yī)定的(de)難度，但(dà&♥n)是(shì)仍然有(yǒu)一(yī)≥$↔&些(xiē)指标可(kě)以一(yī)測量它₹‍☆®。如(rú)果一(yī) 個(gè)會(huì)話(huà)中用(yò>δng)戶會(huì)浏覽你(nǐ)網站(zhàn)中的(de)多(duō)個γ₩(gè)頁面，并且這(zhè)些(xiē)&₹‌頁面中會(huì)重複使用(yòng)相(xiàng)同的(de)腳Ωσ&本和(hé)樣式表，緩存外(wài)部文(wén)ε≠件(jiàn)就(jiù)會(huì)帶來(lái)更大(dà)的(dΩ'βe)益處。
  許多(duō)網站(zhàn)沒↑✔₽有(yǒu)功能(néng)建立這(zhè)些$σ±(xiē)指标。對(duì)于這(zhè)些(xiē)網站₽→★←(zhàn)來(lái)說(shuō)，最好(hǎo)的(de)堅決方法&♠就(jiù)是(shì)把JavaScript和(hé)CSS作®£(zuò)為(wèi)外(wài)部文(wén)件(jiàn)引用(yòng)¥​¥∏。比較适合使用(yòng)內(nèi)置代碼的(de)例外(wài)就(j₩♠♣↕iù)是(shì) 網站(zhàn)的(de)主頁，如(rú)Yahoo♥™!主頁和(hé)My Yahoo!。主頁在一(yī)次<₹會(huì)話(huà)中擁有(yǒu)較少(shǎo)（可γ§∑(kě)能(néng)隻有(yǒu)一(yī)β'ε次）的(de)浏覽量，你(nǐ)可(kě)以發​​現(xiàn)內(nèi)置JavaScript和(hé)CSS對(duìσ'♣)于終端用(yòng)戶來(lái)說(shuō↑≥≠)會(huì)加快(kuài)響應時(shí) 間(jiān)。
  對(duì)于擁有(yǒα•✔∑u)較大(dà)浏覽量的(de)首頁來(lái)說(shuō)βφ，有(yǒu)一(yī)種技(jì)術(shù)可(kě)以平衡 ↕內(nèi)置代碼帶來(lái)的(de)HT¶ε→εTP請(qǐng)求減少(shǎo)與通(tōng)過使用(yòng)∏​$外(wài)部文(wén)件(jiàn)進行(xín©λg)緩存帶來(lái)的(de)好(hǎo)處。其中一(yī)個(gè)φ ≠¥就(jiù)是(shì)在首頁中內(nèi)置 Java∞  ←Script和(hé)CSS，但(dàn)是(shì)在頁面下(xià)載完± ↑成後動态下(xià)載外(wài)部文(wén)件(jiàn)，λ‍₹在子(zǐ)頁面中使用(yòng)到(dào)這(zhè)些(xiē)文(β✔λ•wén)件(jiàn)時(shí)，它們已經緩存到(dà∑​÷×o)浏覽器(qì)了(le)。


23、削減JavaScript和(hé)CSS 
  精簡是(shì)指從(cóng)去(qù)除代α€γ>碼不(bù)必要(yào)的(de)字符減少(shǎo)文(wé₽¶✔n)件(jiàn)大(dà)小(xiǎo)從(cóng)而節省下(xià)載&↔時(shí)間(jiān)。消減代碼時(shí)，所有(yǒu)的‌≈×<(de)注釋、不(bù)需要(yào)的(de)空(kōng)白(bái)字→∑​符（空(kōng)格、換行(xíng)、tab縮進）等都(→♠§÷dōu)要(yào)去(qù)掉。在 JavaScript中，由÷Ω♠于需要(yào)下(xià)載的(de)文 ε(wén)件(jiàn)體(tǐ)積變小(xiǎo∑♦✔)了(le)從(cóng)而節省了(le ★¥)響應時(shí)間(jiān)。精簡Java±☆Ω Script中目前用(yòng)到(dào≠∑☆♣)的(de)最廣泛的(de)兩個(gè)工(gōng)具是₽​(shì)JSMin和(hé)YUI Compressor。YUIσγΩ Compressor還(hái)可(kě)用(↕δyòng)于精簡CSS。
  混淆是(shì)另外(wài)一(yī)種可(kě)用↕ >(yòng)于源代碼優化(huà)的(de)方法。這(zh∏♥≤ è)種方法要(yào)比精簡複雜(zá)一(yī)些(xiē→Ω‍)并且在混淆的(de)過程更易産生(shēng)問(wèn)題φ$&。在對(duì)美(měi)國(guó)前10大(dà)網站→¥✘(zhàn)的(de)調查中發現(xiàn)，精簡也(≈☆yě)可(kě)以縮小(xiǎo)原來(lái) 代碼體(tǐ)積•₩‍×的(de)21%，而混淆可(kě)以達到(≥±dào)25%。盡管混淆法可(kě)以更好(hǎo>★"™)地(dì)縮減代碼，但(dàn)是(shì)對(duì)于JavaScri✔∑pt來(lái)說(shuō)精簡的(de)風(fēng)險更小(φ±×xiǎo)。
  除消減外(wài)✘¶部的(de)腳本和(hé)樣式表文(wén)©"σ件(jiàn)外(wài)，<script>和 €₩(hé)<style>代碼塊也(yě™₩)可(kě)以并且應該進行(xíng)消減≤↔。即使你(nǐ)用(yòng)Gzip壓縮過腳本 和(hé)樣♣¶式表，精簡這(zhè)些(xiē)文(wén)件(j ©★δiàn)仍然可(kě)以節省5%以上(shàng)的(de)空(kōng)間₩&£₹(jiān)。由于JavaScript和(hé)CSπ♥'←S的(de)功能(néng)和(hé)體(tǐ)積的(de)增加，消減✔÷¥¥代碼将會(huì)獲得(de)益處。



24、剔除重複腳本 
  在同一(yī)個(gè)頁面中★₹≈重複引用(yòng)JavaScript文(wén)件(jiàn)♥ 會(huì)影(yǐng)響頁面的(de)性能γ≥→‍(néng)。你(nǐ)可(kě)能(néng)會(huì ♣)認為(wèi)這(zhè)種情況并不(bù)多(duō)見(jiàn€‌)。對(duì)于美(měi)國(guó)前10大(dà)網♥×​站(zhàn)的(de)調查顯示其中有(yǒu)兩∑★→≠家(jiā)存在重複引 用(yòng)腳本的(de)情♣<≈況。有(yǒu)兩種主要(yào)因素導緻一(yī)個(gè)腳本被€≈重複引用(yòng)的(de)奇怪現(xiàn)象發生(shēn¥"g)：團隊規模和(hé)腳本數(shù)量。₽÷§如(rú)果真的(de)存在這(zhè)種情況，重複腳€<"£本會(huì)引起不(bù)必要(yào)的(de)HTTP請(qǐn ☆αg)求和(hé) 無用(yòng)的(de)JavaS★®"cript運算(suàn)，這(zhè)降低(d≈♦β ī)了(le)網站(zhàn)性能(néng)。
  在Internet Explorer中會(hu↑₹ ★ì)産生(shēng)不(bù)必要(yào)的(dΩ₹±≥e)HTTP請(qǐng)求，而在Firefox卻不(bù)會(huì)。在¥≥Internet Explorer中，如(rú)果一(yī)個♥≠(gè)腳本被引用(yòng)兩次而且它又(yòu™"​)不(bù)可(kě)緩存，它就(jiù)會(h★γ★≠uì)在頁面加載過程中産生(shēng)兩次HTTP請(™∑qǐng)求。即時(shí)腳本可(kě)以緩存♦≥→，當用(yòng)戶重載頁面時(shí)也(yě)會(huì)産 生(shēφ&ng)額外(wài)的(de)HTTP請(qǐ ☆✔ng)求。
  除增加額外(wài)的(de)HTTP請(qǐng)γε$§求外(wài)，多(duō)次運算(suàn)腳本也(yě)會(h®<☆uì)浪費(fèi)時(shí)間(jiān)。在In♠★ternet Explorer和(hé)Firefox中不(bù)管腳本是(sλ∑§hì)否可(kě)緩存，它們都(dōu)存在β¥∑重複運算(suàn)JavaScript的(d™✘✘<e)問(wèn)題。
  一(yī)個(g&γ↕è)避免偶爾發生(shēng)的(de)兩次引用(yò±≈σ✘ng)同一(yī)腳本的(de)方法是(shì)在模闆中使用≤♣★©(yòng)腳本管理(lǐ)模塊引用(yòng₽¥β>)腳本。在HTML頁面中使用(yòng)<s₩ cript />标簽引用(yòng)腳∑↕ 本的(de)最常見(jiàn)方法就(jiù)是(shì)： 
    <script type="text/∞♠•javascript" src="menu_1.0.♥§17.js"></script> 
在PHP中可(kě)以通(tōng)過創建名為(w ↓> èi)insertScript的(de)方法來(lái)替代： β★
     <?ph‌≥βαp insertScript("menu.js")↕' ?> 
為(wèi)了(le)防止多(duō)次重複≈Ω¶₽引用(yòng)腳本，這(zhè)個(gè)方法中還(hái)應該使用(yònΩ♣× g)其它機(jī)制(zhì)來(lái)∑πδ§處理(lǐ)腳本，如(rú)檢查所屬目錄和(hé)為(wèi)腳本文(wé∞♣‌n)件(jiàn)名中增加版本号以用(yòng)于Ex"&pire文(wén)件(jiàn)頭等。


25、減少(shǎo)DOM訪問(wèn) 
  使用(yòng)‍"β§JavaScript訪問(wèn)DOM元λ✘π★素比較慢(màn)，因此為(wèi)了(l♣•≤ e)獲得(de)更多(duō)的(de)應該頁面，應該做(zuò)到(✘≥dào)：
緩存已經訪問(wèn)過的(de)有(yǒu)關元素 
線下(xià)更新完節點之後再将它們添加到(dào)文(wén)•£™檔樹(shù)中 
避免使用(yòng)JavaScript來(δ÷φlái)修改頁面布局 
  有(yǒu)關此方面的£←(de)更多(duō)信息請(qǐng)查看(kàn)Jul♥​ien Lecomte在YUI專題中的(dש€e)文(wén)章(zhāng)“高(gāo)性σ "能(néng)Ajax應該程序”。


26、開(kāi)發智能(néng)事(shì)件(ji≠×€♥àn)處理(lǐ)程序 
  有(yǒu)時(shí)候我們會(huε₩ì)感覺到(dào)頁面反應遲鈍，這(zhè)>Ω&是(shì)因為(wèi)DOM樹(shù)元素中附加 ↑λ∑了(le)過多(duō)的(de)事(shì)件(jiàn)句柄并且些>♠©>(xiē)事(shì)件(jiàn)句病被頻(pín)繁地(dì)觸發。這(‍ zhè)就(jiù)是(shì)為(wèi)什(shén)麽說(s¥‍↕↕huō)使用(yòng)event deφ≤♠legation（事(shì)件(jiàn)代理(lǐ)）₩σ"≠是(shì)一(yī)種好(hǎo)方法了(le♣&)。如(rú)果你(nǐ)在一(yī)個(gè)div中★>ε₽有(yǒu)10個(gè)按鈕，你(nǐ)隻需要(yà↑↓Ω≠o)在div上(shàng)附加一(yī)次事γ↕∑(shì)件(jiàn)句柄就(jiù)可(kě)以φ∑π‍了(le)，而不(bù)用(yòng)去(qù)為(wèi)每一<↓(yī)個(gè)按 鈕增加一(yī)個(g∞βè)句柄。事(shì)件(jiàn)冒泡時(shí)你(nǐ)可(kě)以捕捉  到(dào)事(shì)件(jiàn)并判斷 ☆‍出是(shì)哪個(gè)事(shì)件(jiàn)發出的(de Ω'&)。
  你(nǐ)同樣也(yě)不(bù)用(yòng)為(£★wèi)了(le)操作(zuò)DOM樹(shù)而等待onload事(s™×↑hì)件(jiàn)的(de)發生(shēng)。你(nǐδδ)需要(yào)做(zuò)的(de)就(jiù)是(shì)等待樹(φ©shù)結構中你(nǐ)要(yào)訪問(wèn)的(de)元素出現(xià¶& ←n)。你(nǐ)也(yě)不(bù)用(yòng₹₩)等待所有(yǒu)圖像都(dōu)加載完畢。
  你(nǐ)可(kě)能(néng)會(huì)希₽∞​望用(yòng)DOMContentLoaded事(shì)>↔↓σ件(jiàn)來(lái)代替 事(shì)件(jiànδ→)應用(yòng)程序中的(de)onAvailable方法。
  有(yǒu)關此方面的¶≤£(de)更多(duō)信息請(qǐng)查看(kàn)Julien Leco☆•mte在YUI專題中的(de)文(wén)章(zhāng)“高(gāo)性α≠™能(néng)Ajax應該程序”。


圖片和(hé)Coockie也(yě)是(shì)我們網站☆→(zhàn)中幾乎不(bù)可(kě)缺γ≠少(shǎo)組成部分(fēn)，此外(wài) ¶随著(zhe)移動設備的(de)流行(xíng)，對(d≠♣uì)于移動應用(yòng)的(de)優化(huà♣©φ)也(yě)十分(fēn)重要(yào)。這(zφ★≈≈hè)主要(yào)包括：


五、Coockie部分(fēn)

  • 減小(xiǎo)Cookie體(tǐ∞∞)積
  • 對(duì)于頁面內(nèi)容使用(yòng)‍™無coockie域名

27、減小(xiǎo)Cookie體(tǐ)積 
  HTTP coockie可(kě♠÷™γ)以用(yòng)于權限驗證和(hé)個(gè)性化(huà)身(↕★ ®shēn)份等多(duō)種用(yòng)途。coockieγ‌內(nèi)的(de)有(yǒu)關信息是(shβ≥ì)通(tōng)過HTTP文(wén)件(jiàn)頭來(l' >ái)在web服務器(qì)和(hé)浏覽器(qì)之間(jiān£λ )進行(xíng)交流的(de)。因此 保持coockie盡可(k<₩ě)能(néng)的(de)小(xiǎo)以減少(shǎo)用(y‍₽β¶òng)戶的(de)響應時(shí)間(jiān)十分(fēn)重要(y↔≤π★ào)。
有(yǒu)關更多(duō)信息可(kě)以查看(kàn)T<> enni Theurer和(hé)Patty Chi的(♦<de)文(wén)章(zhāng)“When the Cookie Crum±±™$bles”。這(zhè)們研究中主要(y ©'ào)包括：
去(qù)除不(bù)必要(yào)的(de)coo&σ£∞ckie

使coockie體(tǐ)積盡量小(xiǎo)以減少(shǎo)對(du∞₩™↔ì)用(yòng)戶響應的(de)影(yǐδ¶ng)響 
注意在适應級别的(de)域名上(shàng)設置coockie以便使₽↓♠≥子(zǐ)域名不(bù)受影(yǐng)響 
設置合理(lǐ)的(de)過期時(shí)間(ji≤↔ān)。較早地(dì)Expire時(shí)ασ間(jiān)和(hé)不(bù)要(yào)過早去(qù)清除coocki×<e，都(dōu)會(huì)改善用(yòng)戶Ω¥®€的(de)響應時(shí)間(jiān)。


28、對(duì)于頁面內(nèi)容使用(yònε>g)無coockie域名 
  當浏覽器(qì)在請(qǐγ₹ng)求中同時(shí)請(qǐng)求一(↕♠÷φyī)張靜(jìng)态的(de)圖片和(  ≤hé)發送coockie時(shí)，服務器(qì‌δ✘∏)對(duì)于這(zhè)些(xiē)coockie不(bù)會(↓Ω→‌huì)做(zuò)任何地(dì)使用(yòng)。 ↕≤因此他(tā)們隻是(shì)因為(wèi)某些(xiē)負面因素而創建的(d₩✔e) 網絡傳輸。所有(yǒu)你(nǐ)應該确定對(duì)于α 靜(jìng)态內(nèi)容的(de)請(qǐng)求是(∞₹εshì)無coockie的(de)請(qǐng)求。✘σ創建一(yī)個(gè)子(zǐ)域名并用(&&§yòng)他(tā)來(lái)存放(fàng)所有(yǒu)靜(j₹©≤ìng)态內(nèi)容。
   如(rú)果你(nǐ)的(de£‍¶)域名是(shì)http://www.example.org/ ，你(nǐ)可(kě)以在static.example.org上(↓α£←shàng)存在靜(jìng)态內(nèi)容。但(dàn)是'•∑(shì)，如(rú)果你(nǐ)不(bù)是(shì)在http://www.example.org/ 上(shàng)而是(shì)在頂級域名exa≈≠≥mple.org設置了(le)coockie，那(nà)麽所有(yφ≥Ωǒu)對(duì)于static.example.org的π λ(de)請(qǐng)求都(dōu)包含co‍ ockie。在這(zhè)種情 況下(xià)，•'•₩你(nǐ)可(kě)以再重新購(gòu)買一(yī×δ↑)個(gè)新的(de)域名來(lái)存在靜(jìn &&♦g)态內(nèi)容，并且要(yào)保持這(zhè)個(gè)域名是(sγ≠>αhì)無coockie的(de)。Yahoo!使用(yò¶ ∞₹ng)的(de)是(shì)ymig.com，YouTube使 用(y♠★òng)的(de)是(shì)ytimg.com，Aα‌€mazon使用(yòng)的(de)是(shì)im ​ages-anazon.com等等。
  使用(yòng)無≈↔ πcoockie域名存在靜(jìng)态內(nèi‍ ≥δ)容的(de)另外(wài)一(yī)個(gèδ™)好(hǎo)處就(jiù)是(shì)γ<一(yī)些(xiē)代理(lǐ)（服務器(qì)）可(kě)能(↕÷≠néng)會(huì)拒絕對(duì)coockie的(de)β↓內(nèi)容請(qǐng)求進行(xíng)緩存。一(yī≈ ♦→)個(gè)相(xiàng)關的(de)建議(yì)就(ji≠♦δù)是(shì)，如(rú)果你(nǐ) 想确♦α£∏定應該使用(yòng)example.org還(hái)是≥ €(shì)http://www.example.org/ 作(zuò)為(wèi)你(nǐ)的∏ >(de)一(yī)主頁，你(nǐ)要(yào)≈≠§δ考慮到(dào)coockie帶來(lái)的(de)影≥•(yǐng)響。忽略掉www會(huì)使你(nǐ)除了(↕≤le)把coockie設置到(dào)*.exΩα≤♥ample.org（*是(shì)泛域名解"α•×析，代表 了(le)所有(yǒu)子(zǐ)域♦♥→>名譯者dudo注）外(wài)沒有(yǒu)其它選擇‌‍ ，因此出于性能(néng)方面的(de)考慮最好(hǎo)是(sh ‌¥"ì)使用(yòng)帶有(yǒu)www的(de)子€≤(zǐ)域名并且在它上(shàng)面設置coockie。


六、Image 部分(fēn)

  • 優化(huà)圖像
  • 優化(huà)CSS Spirite
  • 不(bù)要(yào)在HTML中縮放(fàng)圖像
  • favicon.ico要(yào)小(♣‌xiǎo)而且可(kě)緩存

29、優化(huà)圖像 
  設計(jì)人(rén)員(∞≈>∑yuán)完成對(duì)頁面的(de)設計(jì)之後，不(✘‍ bù)要(yào)急于将它們上(shàng)傳到(dào)web服務器(q•✔‍↕ì)，這(zhè)裡(lǐ)還(hái)需要(yào)做(zuò)幾γ←φ♠件(jiàn)事(shì)：
你(nǐ)可(kě)以檢查一(yī)下(xià∏♣♦)你(nǐ)的(de)GIF圖片中圖像顔色♦↓÷的(de)數(shù)量是(shì)否和(hé)調色闆↕λ規格一(yī)緻。 使用(yòng)imagemagδ↔×ick中下(xià)面的(de)命令行(xíngφσ )很(hěn)容易檢查：
      identify  ÷✘-verbose image.gif δ¶€;
如(rú)果你(nǐ)發現(xiàn)圖片中隻用(yòng)到(dào)了(l×λσe)4種顔色，而在調色闆的(de)中顯示的(de​π)256色的(de)顔色槽，那(nà)麽這(zhè)張圖片就(jiù★×¥)還(hái)有(yǒu)壓縮的(de)空(kōng)間(jiān)。&nbs₩↕σ€p;
  嘗試把GIF格式轉換成PNG格 ∞式，看(kàn)看(kàn)是(shì)否節省空(δ‍★kōng)間(jiān)。大(dà)多(duō)數(sh÷α≈ù)情況下(xià)是(shì)可(kě)以壓↓±縮的(de)。由于浏覽器(qì)支持有(yǒu)限，∞₩"設計(jì)者們往往不(bù)太樂(yuè)意δ®★使用(yòng)PNG格式的(de)圖片，不(bù"€)過 這(zhè)都(dōu)是(shì)過去(qù)的(de)事(shì)情→₽  了(le)。現(xiàn)在隻有(yǒu)一(yī)個(gè)≈♦★$問(wèn)題就(jiù)是(shì)在真γΩσ彩PNG格式中的(de)alpha通(tōng)道(dào)半透明(​≈γ'míng)問(wèn)題，不(bù)過同樣的(de)，GIF也(yě)不(bù>★)是(shì)真彩格式也(yě)不(bù)支持半透明(míφ<σng)。因此GIF 能(néng)做(zuò)到(dà÷δo)的(de)，PNG（PNG8）同樣也(yě)能(néng)做(zuò)♥₽Ω→到(dào)（除了(le)動畫(huà)）。≈γ©下(xià)面這(zhè)條簡單的(de)命令可​©(kě)以 安全地(dì)把GIF格式轉換為(wèi)PNGλσ 格式：

      conver €t image.gif image.png↓♣

“我們要(yào)說(shuō)的(de✘♥♥♥)是(shì)：給PNG一(yī)個(gè$₽✔↑)施展身(shēn)手的(de)機(jī)會(huì)吧(b₹♠↕a)！” 
在所有(yǒu)的(de)PNG圖片上(shà≈≈∑£ng)運行(xíng)pngcrush（或者其它 ÷ε'PNG優化(huà)工(gōng)具）。例如(rú)：
      →₽λpngcrush image.png -rem "‍alla -reduce -brute <₹♣←result.png 
在所有(yǒu)的(de)JPEG圖片上(sh​↓→™àng)運行(xíng)jpegtran。這(zhè)個(gè)工(gōng∏₩≤)具可(kě)以對(duì)圖片中的(de)出現(xiàn)的(deδ←)鋸齒等做(zuò)無損操作(zuò)，同時(shí)它還(hái)可(kě)↑∞以用(yòng)于優化(huà)和(hé)清除"←γ×圖片中的(de)注釋以及其它無用(yòng)信息 （如(αα÷•rú)EXIF信息）：
      jpegtr>∞≤an -copy none -optimize -per ≥fect src.jpg dest.jpg


30、優化(huà)CSS Spirite 
  在Spirite中水(shuǐ≈♣≤±)平排列你(nǐ)的(de)圖片，垂直排列會(huì)稍稍增加文(wénδ₽₽≠)件(jiàn)大(dà)小(xiǎo)；&≤ nbsp;
Spirite中把顔色較近(jìn)的(de)組ε®合在一(yī)起可(kě)以降低(dī)顔色數(™∏shù)，理(lǐ)想狀況是(shì)低(dī)于256色以便适用(×λyòng)PNG8格式； 
  便于移動，不(bù)要(yàoγ  )在Spirite的(de)圖像中間(ji×₹‍Ωān)留有(yǒu)較大(dà)空(kōng)隙。這(zhè)雖然& <不(bù)大(dà)會(huì)增加文(wén)件(jiàn)大(dà)小(♦ xiǎo)但(dàn)對(duì)于用(yòng)戶代理(lǐ)來(lái)€₹α¶說(shuō)它需要(yào)更少(shǎo)的(de)內(n£λ₹èi)存來(lái)把圖片解壓為(wèi)像素地(dì‍"εγ)圖。 100x100的(de)圖片為(wèi)1萬像素，而1000x10÷ 00就(jiù)是(shì)100萬像素。


31、不(bù)要(yào)在HTML中縮放(fàng)圖像 ★±λ©
  不(bù)要(yào)為(wèi)了(le)在HTMπσ×L中設置長(cháng)寬而使用(yòng)比實際需要(yà₩€£o)大(dà)的(de)圖片。如(rú)果你(nǐ)需要(y÷∑ào)：
<img width="100" height="100÷↕¶♠" src="mycat.jpg" alt="My Ca<™t" />
那(nà)麽你(nǐ)的(de)圖片（m©₩ycat.jpg）就(jiù)應該是(shì)100x10₹≠0像素而不(bù)是(shì)把一(yī)個(gè)500♦∑♠×x500像素的(de)圖片縮小(xiǎo)使用(yòng)。


32、favicon.ico要(yào)小(xiǎo)而且可(k₹£>ě)緩存 
  favicon.ico是(shì)位于服務‍>±δ器(qì)根目錄下(xià)的(de)一(yī)個(gè)圖片文≈‍(wén)件(jiàn)。它是(shì)必定存在的(de)，因為(wè☆≥€$i)即使你(nǐ)不(bù)關心它是(shì)否有(yǒu)用(yòng)， ↔♦™浏覽器(qì)也(yě)會(huì)對(duì)它$≥ 發出請(qǐng)求，因此最好(hǎo)不(bù)要(y♥★ào)返回一(yī) 個(gè)404 Not Found的(de≤¥)響應。由于是(shì)在同一(yī)台服務器(qì)上(s¥<≤δhàng)，它每被請(qǐng)求一(yī)次coo≥ ✘&ckie就(jiù)會(huì)被發送一(yī)次。這(zhè)個(gè)圖¥≤≠片文(wén)件(jiàn)還(hái)會(<∞₩huì)影(yǐng)響下(xià)載順序，例如(rú)在IE中當★≤ Ω你(nǐ)在 onload中請(qǐng)求額外(wài)的®←₩(de)文(wén)件(jiàn)時(shí)，≈∏Ωγfavicon會(huì)在這(zhè)些(xiē)額外(wài)內(nèi•γ£)容被加載前下(xià)載。
  因此，為(wèi)了(le)減少(s♦♠÷hǎo)favicon.ico帶來(lái)的(de)弊α≈λ端，要(yào)做(zuò)到(dào)：
文(wén)件(jiàn)盡量地(dì)小(™&≤xiǎo)，最好(hǎo)小(xiǎo)于1K ¶™‍
在适當的(de)時(shí)候（也(yě)就(jiù)是(shì←φ☆→)你(nǐ)不(bù)要(yào)打算(suàn)再換£₹↓favicon.ico的(de)時(shí)候，因為₩•(wèi)更換新文(wén)件(jiàn)時(s>♠∑✘hí)不(bù)能(néng)對(duì)它進行(xíng)重命名）為(wα₹♥èi)它設置Expires文(wén)件(jiàn)頭。你(nǐ)可₩•γ∑(kě)以很(hěn)安全地(dì) 把Expi★↑res文(wén)件(jiàn)頭設置為(wèi)未來∞λ(lái)的(de)幾個(gè)月(yuè)。§₽你(nǐ)可(kě)以通(tōng)過核對(duì)當前$γφ‍favicon.ico的(de)上(shàng)次編輯時(sh ∑₹í)間(jiān)來(lái)作(zuò)出判斷。 
Imagemagick可(kě)以幫你(nǐ)創建×♠✘↓小(xiǎo)巧的(de)favicon↑©。


七、 Mobile部分(fēn)

  • 保持單個(gè)內(nèi)容小(xiǎo)于25K Ωπ≈
  • 打包組件(jiàn)成複合文(wén)本

33、保持單個(gè)內(nèi)容小(xiǎo)于25K&n♦​←↓bsp;
  這(zhè)條限制(zhì)主要(yào)是(sh→£ì)因為(wèi)iPhone不(bù)能(néng)ε•€≈緩存大(dà)于25K的(de)文(wén)件(jiàn)。注意這★≈ (zhè)裡(lǐ)指的(de)是(shì)解壓縮後的(de)大(dà)小(x£β• iǎo)。由于單純gizp壓縮可(kě)能(nénδ✘'g)達不(bù)要(yào)求，因此精簡文(w♥$→Ωén)件(jiàn)就(jiù)顯得(de)十分(ε☆∑​fēn)重 要(yào)。
  查看(kàn)更多(duō)信$ ¥息，請(qǐng)參閱Wayne Shea和 ✘₩π(hé)Tenni Theurer的(de)文✘÷ε←(wén)件(jiàn)“Performance Research≠‍≤&, Part 5: iPhone Cacheab✔πility - Making it Stick”。


34、避免空(kōng)的(de)圖像$₩≥↑來(lái)源