YUI前端優化原則-cookie與圖像

4、圖片、Coockie與移動應用篇

除此以外，圖片和Coockie也是咱們網站中幾乎不可缺乏組成部分，此外隨着移動設備的流行，對於移動應用的優化也十分重要。這主要包括：
Coockie:

1. 減少Cookie體積
2. 對於頁面內容使用無coockie域名

圖片：

1. 優化圖像
2. 優化CSS Spirite
3. 不要在HTML中縮放圖像
4. favicon.ico要小並且可緩存

移動應用：

1. 保持單個內容小於25K
2. 打包組件成複合文本

2七、減少Cookie體積
      HTTP coockie能夠用於權限驗證和個性化身份等多種用途。coockie內的有關信息是經過HTTP文件頭來在web服務器和瀏覽器之間進行交流的。所以保持coockie儘量的小以減小用戶的響應時間十分重要。
有關更多信息能夠查看Tenni Theurer和Patty Chi的文章「When the Cookie Crumbles」。這們研究中主要包括：

• 去除沒必要要的coockie
• 使coockie體積儘可能小以減小對用戶響應的影響
• 注意在適應級別的域名上設置coockie以便使子域名不受影響
• 設置合理的過時時間。較早地Expire時間和不要過早去清除coockie，都會改善用戶的響應時間。

2八、對於頁面內容使用無coockie域名
      當瀏覽器在請求中同時請求一張靜態的圖片和發送coockie時，服務器對於這些coockie不會作任何地使用。所以他們只是由於某些負面因素而建立的 網絡傳輸。全部你應該肯定對於靜態內容的請求是無coockie的請求。建立一個子域名並用他來存放全部靜態內容。
      若是你的域名是www.example.org，你能夠在static.example.org上存在靜態內容。可是，若是你不是在 www.example.org上而是在頂級域名example.org設置了coockie，那麼全部對於static.example.org的請求 都包含coockie。在這種狀況下，你能夠再從新購買一個新的域名來存在靜態內容，而且要保持這個域名是無coockie的。Yahoo!使用的是 ymig.com，YouTube使用的是ytimg.com，Amazon使用的是images-anazon.com等等。
      使用無coockie域名存在靜態內容的另一個好處就是一些代理（服務器）可能會拒絕對coockie的內容請求進行緩存。一個相關的建議就是，若是你 想肯定應該使用example.org仍是www.example.org做爲你的一主頁，你要考慮到coockie帶來的影響。忽略掉www會使你除了 把coockie設置到*.example.org（*是泛域名解析，表明了全部子域名譯者dudo注）外沒有其它選擇，所以出於性能方面的考慮最好是使用帶有www的子域名而且在它上面設置coockie。

2九、優化圖像
      設計人員完成對頁面的設計以後，不要急於將它們上傳到web服務器，這裏還須要作幾件事：

• 你能夠檢查一下你的GIF圖片中圖像顏色的數量是否和調色板規格一致。 使用imagemagick中下面的命令行很容易檢查：
  identify -verbose image.gif 
  若是你發現圖片中只用到了4種顏色，而在調色板的中顯示的256色的顏色槽，那麼這張圖片就還有壓縮的空間。
• 嘗 試把GIF格式轉換成PNG格式，看看是否節省空間。大多數狀況下是能夠壓縮的。因爲瀏覽器支持有限，設計者們每每不太樂意使用PNG格式的圖片，不過這 都是過去的事情了。如今只有一個問題就是在真彩PNG格式中的alpha通道半透明問題，不過一樣的，GIF也不是真彩格式也不支持半透明。所以GIF能 作到的，PNG（PNG8）一樣也能作到（除了動畫）。下面這條簡單的命令能夠安全地把GIF格式轉換爲PNG格式：
  convert image.gif image.png
  「咱們要說的是：給PNG一個施展身手的機會吧！」
• 在全部的PNG圖片上運行pngcrush（或者其它PNG優化工具）。例如：
  pngcrush image.png -rem alla -reduce -brute result.png
• 在全部的JPEG圖片上運行jpegtran。這個工具能夠對圖片中的出現的鋸齒等作無損操做，同時它還能夠用於優化和清除圖片中的註釋以及其它無用信息（如EXIF信息）：
  jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30、優化CSS Spirite

• 在Spirite中水平排列你的圖片，垂直排列會稍稍增長文件大小；
• Spirite中把顏色較近的組合在一塊兒能夠下降顏色數，理想情況是低於256色以便適用PNG8格式；
• 便於移動，不要在Spirite的圖像中間留有較大空隙。這雖然不大會增長文件大小但對於用戶代理來講它須要更少的內存來把圖片解壓爲像素地圖。100x100的圖片爲1萬像素，而1000x1000就是100萬像素。

3一、不要在HTML中縮放圖像
      不要爲了在HTML中設置長寬而使用比實際須要大的圖片。若是你須要：
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那麼你的圖片（mycat.jpg）就應該是100x100像素而不是把一個500x500像素的圖片縮小使用。

3二、favicon.ico要小並且可緩存
      favicon.ico是位於服務器根目錄下的一個圖片文件。它是一定存在的，由於即便你不關心它是否有用，瀏覽器也會對它發出請求，所以最好不要返回一 個404 Not Found的響應。因爲是在同一臺服務器上，它每被請求一次coockie就會被髮送一次。這個圖片文件還會影響下載順序，例如在IE中當你在 onload中請求額外的文件時，favicon會在這些額外內容被加載前下載。
      所以，爲了減小favicon.ico帶來的弊端，要作到：

• 文件儘可能地小，最好小於1K
• 在適當的時候（也就是你不要打算再換favicon.ico的時候，由於更換新文件時不能對它進行重命名）爲它設置Expires文件頭。你能夠很安全地把Expires文件頭設置爲將來的幾個月。你能夠經過覈對當前favicon.ico的上次編輯時間來做出判斷。

Imagemagick能夠幫你建立小巧的favicon。

3三、保持單個內容小於25K
      這條限制主要是由於iPhone不能緩存大於25K的文件。注意這裏指的是解壓縮後的大小。因爲單純gizp壓縮可能達不要求，所以精簡文件就顯得十分重要。
      查看更多信息，請參閱Wayne Shea和Tenni Theurer的文件「Performance Research, Part 5: iPhone Cacheability - Making it Stick」。

3四、打包組件成複合文本
      把頁面內容打包成複合文本就如同帶有多附件的Email，它可以使你在一個HTTP請求中取得多個組件（切記：HTTP請求是很奢侈的）。當你使用這條規則時，首先要肯定用戶代理是否支持（iPhone就不支持）。