1. 首頁
  2. 新聞資訊

新聞資訊

13 2014 03月(yuè)

[轉載]雅虎35條優化(huà)黃(huáng)金(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òng)戶的(de )帶寬、互聯網提供者、與對(duì)等交換點的(de)靠近(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)壓縮格式：   
      Accept-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)頭中的(d∏e)Content- Encoding來(lái)返回給浏覽器(qì)。
      Content-Encoding: 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%的(de)響應規模。目前₹大(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)會(huì)存在這(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)。 Apache模塊會(huì)通(tōng)過自(zì)動添加适當的(de)Vary響應文(wén)件(j&ià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ì)這(zhè)過于限制(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)這(zhè)個(gè)功能(néng)。實際上(shàng)，壓縮任何一(yī)個(gè)文(wén)本類型的(de)響應，包括XM®L和(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òng★)于判斷浏覽器(qì)緩存中的(de)內(nèi)容和(hé)服務器(qì)中的(de)原始內(nèi)容是(shì)否匹配的(de)一(yī)種機(jī)制(zhì)（“實體(tǐ)”就(‍jiù)是(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ì)就(jiù)是→(shì)它必須包含在雙引号內(nèi)。原始服務器(qì)通(tōng)過含有(yǒu) ETag文(♦wén)件(jiàn)頭的(de)響應指定頁面內(nèi)容的(de)ETag。 
      HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:5♦9 GMT
      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è)就(jiù)節省了(le)12195字節的(de)響應。  &>nbsp;   GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:✘59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified
  ETag的(de)問(wèn)題在于，它是(shì)根據可(kě)以辨别網站(zhàn)所在的(de)服務器(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ì)非常常見(jiàn)的(de)。默認情況下(xià)，Apache和(hé)IIS都(dōu)會(huì)♦把數(shù)據嵌入ETag中，這(zhè)會(huì)顯著 減少(shǎo)多(duō)服務器(qì)間(jiān)的(de)文(wén)件(®jiàn)驗證沖突。
   Apache 1.3和(hé)2.x中的(de)ETag格式為(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)完全相(xià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àng)似。IIS中的(de)ETa"g格式為(wèi)Filetimestamp:ChangeNumber。用(yòng)ChangeNumber來(lái)跟蹤 IIS配置的✔(de)改變。網站(zhàn)所用(yòng)的(de)不(bù)同IIS服務器(qì)間(jiān)ChangeNumber也(yě)不(bù)相(xiàng)同。不(bù)≥同的(de)服務器(qì)上(shàng)的(de)Apache和(hé)IIS即使對(duì)于完全相(xiàn♣g)同的(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)網站(z¶hà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ù)會(huì)有(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)ETag都(dōu)去(qù)掉會(huì)更好(hǎo)。Last-Modified文(wén)件(jiàn)頭驗證是(shì)基于內(nèi)容的(de)時(s✘hí)間(jiā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 none


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è)期間(j✔iā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) HTML頁面。這(zhè)樣做(zuò)的(de)效果會(huì)在後台煩惱或者前台較空(kōng)閑時(shí)更加明(mí‌ng)顯。
  輸出緩沖應用(yòng)最好(hǎo)的(de)一(yī)個(gè)地(dì)方就(jiù)是(shì₹)緊跟在<head />之後，因為(wèi)HTML的(de)頭部分(fēn)容易生(shēng)成而且頭部往往包含CSS和(hé)JavaScript文(wén)件(jiàn‌)，這(zhè)樣浏覽器(qì)就(jiù)可(kě)以在後台編譯剩餘HTML的(de)同時(shí)并行(xíng)下(xià) 載↕它們。 例子(zǐ)：

      ... <!-- css, js -->
          </head>
          <?php flush(); ?>
          <body>
      ... <!-- content -->

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


16、使用(yòng)GET來(lái)完成AJAX請(qǐng)求 
  Yahoo!Mail團隊發現(xiàn)，當使用(yòng)XMLHttpRequest時(shí)，浏覽器(qì)中的(de)POST方法是(s hì)一(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ì)POST并不(bù)像GEεT那(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ě)是(shì)我們頁面中經常用(yòng)到(dào)的(de)內(nèi)容，對(duì)它們的(de)優化(hu₹à)也(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ǐng)求。

  • 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é)Safari 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），尤其是(shì)每天有(yǒu)數(shù)百萬訪問(wèn)量的(de)頁面。

2、 産生(shēng)一(yī)個(gè)從(cóng)未浏覽過的(de)頁面将浪費(fèi)服務器(qì)的(de)計(jì)算(suàn)周期（comp™uting cycles）

3、 損壞用(yòng)戶數(shù)據。如(rú)果你(nǐ)在請(qǐng)求中追蹤狀态（以cookie或是(shì)其他(tā)的(de)方式），你(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 the response is thrown away, the damage may already✘ be done.

引起這(zhè)種行(xíng)為(wèi)的(de)根源在于浏覽器(qì)中URI的(de)解析方式。這(zhè)種行(xíng)為(wèi)定義在RFC 3986 - Unif<orm Resource Identifiers.當一(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)串，列在sectioαn 5.4當中。Firefox, Safari, and Chrome都(dōu)是(shì)依據這(zhè)一(yī)規格來(lái)解析空(kōng)串，而Internet↔ Explorer則不(bù)正确的(de)解析這(zhè)個(gè)串，符合更早的(de)一(yī)個(gè)規範，RFC 2396 - Uniform Resource Identif∑iers (this was obsoleted by RFC 3986).所以技(jì)術(shù)上(shàng)，浏覽器(qì)都(dōu)在做(zuò)它們被期±望所做(zuò)的(de)事(shì)情來(lái)解析relative URIs，問(wèn)題是(shì)在這(≠zhè)個(gè)範圍，空(kōng)串不(bù)是(shì)故意造成的(de)。


HTML5 adds to the description of the file:///C:/Users/Prayer/AppData/Local/Temp/ms♦ohtmlclip1/01/clip_image001.giftag's src attribute to instruct browsers not☆ to make an additional request in section 4.8.2:

    The src attribute must be present, and must contain a valid URL referencing a ≤non-interactive, optionally animated, image resource that is neither paged nor scripted.‍ If the base URI of the element is the same as the document's add¥ress, then the src attribute's value must not be the empty string.

非常希望浏覽器(qì)在将來(lái)不(bù)會(huì)有(yǒu)這(zhè)樣的(de)問(wèn)題。不(bù)幸的(de)是(shì)，沒有(yǒu)為δ(wèi)<script 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. Zakas啓發。更新信♠息請(qǐng)參見(jiàn)Empty image src can destroy your site..

三、CSS部分(fēn)

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

17、把樣式表置于頂部 
  在研究Yahoo!的(de)性能(néng)表現(xiàn)時(shí)，我們發現(xiàn)把樣式表放(fàng)到(dào)文(wéδn)檔的(de)<head />內(nèi)部似乎會(huì)加快(kuài)頁面的(de)下(xià)載速度。這(zhè)是(sh♣ì)因為(wèi)把樣式表放(fàng)到(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ě)視(shì)化(huà)的(de)反饋。這(zhè)從(cóng)整體(tǐ)上(shàng)改善了(le)用(yòng)→戶體(tǐ)驗。
  把樣式表放(fàng)在文(wén)檔底部的(de)問(wèn)題是(shì)在包括Internet Ex₹plorer在內(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)檔的(de)<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） 
  CSS表達式是(shì)動态設置CSS屬性的(de)強大(dà)（但(dàn)危險）方法。Internet Explorer從(cóng)第5個(•gè)版本開(kāi)始支持CSS表達式。下(xià)面的(de)例子(zǐ)中，使用(yòng)CSS表達式可(kě)以實現(xiàn)隔一(yī)個(gè)小(₽xiǎo)時(shí)切換一(yī)次背景顔色：
      background-color: expression( (new Date()).getHours₽()%2 ? "#B8D4FF" : "#F08A00" ); 
如(rú)上(shàng)所示，expression中使用(yòng)了(le)JavaScript表達式。CSS屬性根據JavaScript表達式的(de)計(jì)算(s£uàn)結果來(lái)設置。expression 方法在其它浏覽器(qì)中不(bù)起作(zuò)用(yòng)，因此在跨浏覽器(qì)的(de)設計(jì)中單獨針對(duì)Inter₩net 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)時(shí)，就(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ì)算‍(suàn)量。
  一(yī)個(gè)減少(shǎo)CSS表達式計(jì)算(suàn)次數(shù)的(de)方法就(jiù)是(shì)使用(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)成千上(shàng)萬次并且可(kě)能(nén↕g)會(huì)對(duì)你(nǐ) 頁面的(de)性能(néng)産生(shēng)影(yǐng)響。


19、用(yòng)<link>代替@import 
  前面的(de)最佳實現(xiàn)中提到(dào)CSS應該放(fàng)置在頂端以利于有(yǒu)序加載呈現(xiàn)。
  在IE中，頁面底部@import和(hé)使用(yòng)<link>作(zuò)用(yòng)是(©shì)一(yī)樣的(de)，因此最好(hǎo)不(bù)要(yào)使用(yòng)它。


20、避免使用(yòng)濾鏡 
  IE獨有(yǒu)屬性AlphaImageLoader用(yòng)于修正7.0以下(xià)版本中顯示PN‌G圖片的(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)AlphaImageLoader的(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) AlpγhaImageLoader，請(qǐng)使用(yòng)下(xià)劃線_filter又(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ī)名的(d‍e)并行(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è)以上(shà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ē)情況下(xià)把腳本移到(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)域的(de)問(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 Explorer中，腳本可(kě)能(néng)會(huì)被延遲但(dàn)效果也(yě)不(bù)會(huì)像我→們所期望的(de)那(nà)樣。如(rú)果腳本可(kě)以被延遲，那(nà)麽它就(jiù)可(kě)以移到(dào)頁面的(de)底部。這(zhè)會(hΩuì)讓你(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)題：JavaScript和(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)JavaScript 和(hé)CSS則會(huì)在每次請(qǐng)求中随HTML文(wén)檔重新下(xià©)載。這(zhè)雖然減少(shǎo)了(le)HTTP請(qǐng)求的(de)次數(shù)，卻增加了(le)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)部JavaScript和(hé)CSS文(wén)件(jià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à)的(de)益處。
  許多(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)就(jiù)是(shì) 網站(zhàn)的(de)©主頁，如(rú)Yahoo!主頁和(hé)My Yahoo!。主頁在一(yī)次會(huì)話(huà)中擁有(yǒu)較少(shǎo)（可(kě)能(néng)隻有(yǒu)一(yī)次）的(d←e)浏覽量，你(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)HTTP請(qǐng)求減少(shǎo)與通(♦tōng)過使用(yòng)外(wài)部文(wén)件(jiàn)進行(xíng)緩存帶來(lái)的(de)好(hǎo)處。其中一(yī)個β(gè)就(jiù)是(shì)在首頁中內(nèi)置 JavaScript和(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)、tγab縮進）等都(dōu)要(yào)去(qù)掉。在 JavaScript中，由于需要(yào)下(xià)載的(de)文(wén)件(jiàn)體(tǐ)積變小(xiǎo)了(le)從(cóγng)而節省了(le)響應時(shí)間(jiān)。精簡JavaScript中目前用(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ì)于JavaScript來(✘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)件(jiàn)仍然可(kě)以節省5%以上(shàng)的(de)空(kōng)間(jiān)。由于JavaScript和(hé)CSS的(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ēng)：團隊規模和(hé)腳本數(shù)量。如(rú)果真的(de)存在這(zhè)種情況，重複腳本會(huì)引起不(bù✔)必要(yào)的(de)HTTP請(qǐng)求和(hé) 無用(yòng)的(de)JavaScript運算(suàn)，這(zhè)降低(dī)了(le)網站(z€hàn)性能(néng)。
  在Internet Explorer中會(huì)産生(shēng)不(bù)必要(yào)的(de)HTT≤P請(qǐng)求，而在Firefox卻不(bù)會(huì)。在Internet Explorer中☆，如(rú)果一(yī)個(gè)腳本被引用(yòng)兩次而且它又(yòu)不(bù)可(kě)緩存，它就(jiù)會(huì)在頁面加載過程中産生(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ě)會(huì)浪費(fèi)時(shí)間(jiān)。在I​nternet Explorer和(hé)Firefox中不(bù)管腳本是(shì)否可(kě)緩存，它們都(dōu)存在重複運算(suàn)JavaScript的(de)問(wè₹n)題。
  一(yī)個(gè)避免偶爾發生(shēng)的(de)兩次引用(yòng)同一(yī)腳本的(de)方法是(shì)在¶模闆中使用(yòng)腳本管理(lǐ)模塊引用(yòng)腳本。在HTML頁面中使用(yòng)< ;script />标簽引用(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)替代： 
     <?php insertScript("menu.js") ?>&σnbsp;
為(wèi)了(le)防止多(duō)次重複引用(yòng)腳本，這(zhè)個(gè)方法中還(hái)應該使$用(yòng)其它機(jī)制(zhì)來(lái)處理(lǐ)腳本，如(rú)檢查所屬目錄和(hé)為(wèi)腳本文(wén)件(jiàn)名中增加版本号以用(yòng)于Expire文 (wén)件(jiàn)頭等。


25、減少(shǎo)DOM訪問(wèn) 
  使用(yòng)JavaScript訪問(wèn)DOM元素比較慢(màn)，因此為(w×èi)了(le)獲得(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)Julien L→ecomte在YUI專題中的(de)文(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ì)件(j£iàn)句病被頻(pín)繁地(dì)觸發。這(zhè)就(jiù)是(shì)為(wèi)什(shén)麽說(shuō)使♠用(yòng)event delegation（事(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事(shì)件(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)DOMCont∑entLoaded事(shì)件(jiàn)來(lái)代替 事(shì)件(jiàn)應用(yòng)程序中的(de)onAvailable方法。
  有(yǒu)關此方面的(de)更多(duō)信息請(qǐng)查看(kàn)Julien Lecomte在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)，對(duì)于移≤動應用(yòng)的(de)優化(huà)也(yě)十分(fēn)重要(yào)。這(zhè)主要(₽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)Tenni Theurer和(hé)Patty Chi的(de)δ文(wén)章(zhāng)“When the Cookie Crumbles”。這(zhè)們研究中主要(yào)包括：
去(qù)除不(bù)必要(yào)的(de)coockie

使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òng)無coockie域名 
  當浏覽器(qì)在請(qǐng)求中同時(shí)請(qǐng)求一(yī)張靜(jìng)态的(de)圖片和(hé)發送cooc×kie時(shí)，服務器(qì)對(duì)于這(zhè)些(xiē)coockie不(bù)會(huì)做(zuò)任何地(dì)使用(yòng)。因此他(tā)們隻是(shì∞)因為(wèi)某些(xiē)負面因素而創建的(de) 網絡傳輸。所有(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ìn"g)态內(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ì)在頂級域名example.org設置了(le)coockie，那(nà)麽所有©(yǒu)對(duì)于static.example.org的(de)請(qǐng)求都(dōu)包含coockie。在這(zhè)種情 況下(xià)，你(nǐ)可(k ě)以再重新購(gòu)買一(yī)個(gè)新的(de)域名來(lái)存在靜(jìng)态內(nèi)容，并且要(yào)保持這(zhè)個(gè)域名是(sh÷ì)無coockie的(de)。Yahoo!使用(yòng)的(de)是(shì)ymig.com，YouTube使 用(yòng)的(de)是(shì)ytimg∑.com，Amazon使用(yòng)的(de)是(shì)images-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)*.example.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)<imagemagick中下(xià)面的(de)命令行(xíng)很(hěn)容易檢查：
      identify -verbose image.gif 
如(rú)果你(nǐ)發現(xiàn)圖片中隻用(yòng)到(dào)了(le)4種顔色，而在調色闆的(de)中顯示的(★de)256色的(de)顔色槽，那(nà)麽這(zhè)張圖片就(jiù)還(hái)有(yǒu)壓縮的(de)空(kōng)間(jiān)。 
  嘗試把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格式：

      convert image.gif image.png

“我們要(yào)說(shuō)的(de)是(shì)：給PNG一(yī)個(gè)施展身(shēn)λ手的(de)機(jī)會(huì)吧(ba)！” 
在所有(yǒu)的(de)PNG圖片上(shàng)運行(xíng)pngcrush（或者其它PNG優化(huà)工(gōng)具）。例如(rú)：
      pngcrush image.png -rem alla -reduce -brute result.png&₽nbsp;
在所有(yǒu)的(de)JPEG圖片上(shàng)運行(xíng)jpegtran。這(zhè)個(gè)工(gōng)具可(kě)以¶對(duì)圖片中的(de)出現(xiàn)的(de)鋸齒等做(zuò)無損操作(zuò)，同時(s♥hí)它還(hái)可(kě)以用(yòng)于優化(huà)和(hé)清除圖片中的(de)注釋以及其它無用(yòng)信息 （♥如(rú)EXIF信息）：
      jpegtran -copy none -optλimize -perfect src.jpg dest.jpg


30、優化(huà)CSS Spirite 
  在Spirite中水(shuǐ)平排列你(nǐ)的(de)圖片，垂直排列會(huì)稍稍增加文(wén)件(jiàn)大(dà)小(xiǎo)；&n÷bsp;
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ònγg)戶代理(lǐ)來(lái)說(shuō)它需要(yào)更少(shǎo)的(de)內(nèi)存來(lái)把圖片解壓•為(wèi)像素地(dì)圖。 100x100的(de)圖片為(wèi)1萬像素，而1000x1000就(jiù)是(shì)100萬像素。


31、不(bù)要(yào)在HTML中縮放(fàng)圖像 
  不(bù)要(yào)為(wèi)了(le)在HTML中設置長(cháng)寬而使用(yòng)比實際需要(yào)大(dà)的(de)圖片。如(rú)果你(nǐ)≤需要(yào)：
<img width="100" height="100" src="mycat.jpg" alt="M"y Cat" />
那(nà)麽你(nǐ)的(de)圖片（mycat.jpg）就(jiù)應該是(shì)100x100像素而不(bù)是→(shì)把一(yī)個(gè)500x500像素的(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ì)上(shàng)，它每被請(qǐng)求一(yī)次coockie就(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)減少(shǎ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)時(shí)不(bù)能(néng)對(duì)它進行(xíng)重命名）為(wèi)它設≈置Expires文(wén)件(jiàn)頭。你(nǐ)可(kě)以很(hěn)安全地(dì) 把Expires文(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 
  這(zhè)條限制(zhì)主要(yào)是(shì)因為(wèi)iPhone不(bù)能(néng)緩存大(dà)于25K的(de)文(wén)件(jiàn)。γ注意這(zhè)裡(lǐ)指的(de)是(shì)解壓縮後的(de)大(dà)小(xiǎo)。由于單純gizp壓縮>可(kě)能(néng)達不(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)“PerforΩmance Research, Part 5: iPhone Cacheability - Making it Stick”。


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