DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO優化集錦 >> Web前端性能優化教程09:圖像和Cookie優化
Web前端性能優化教程09:圖像和Cookie優化
編輯:SEO優化集錦     

Web前端性能優化教程 Web前端性能優化 Web優化 圖像優化

本文是Web前端性能優化系列文章中的第九篇,主要講述內容:圖像和Cookie優化。完整教程可查看:Web前端性能優化

一、 圖像優化

圖像基礎知識

gif: 適用於動畫效果,例如提示的滾動條圖案 Web前端性能優化教程 Web前端性能優化 Web優化 圖像優化

jpg: 是一種使用有損壓縮的圖片格式,它將圖片的每個像素分解成8*8的柵格,然後對每個柵格的數據進行壓縮處理,通過特殊的算法用附近的顏色填充柵格,隱藏細節。用戶可以設置質量級別,從0到100,數字越少圖片質量就越差。

png:是一種使用無損壓縮的圖片格式,它將圖片上出現的顏色進行索引,保留在“調色板”上,PNG在顯示圖像的時候就會調用調色板的顏色去填充相應的位置。png又分為png8,png24和png32;png8表示支持2^8個種顏色,通常情況下png8是最通用的web圖片格式。

選擇jpg還是png

對比jpg和png的特點,不同的圖像使用不同的格式能得到最佳壓縮效果。對於層次豐富顏色較多的圖像,使用jpg更好,因為為了很好的顯示這種圖像,png將使用調色板顏色更為豐富的png24,這樣圖片大小會比jpg大。而對於顏色簡單對比強烈的圖像,使用png更好,因為png使用較少的調色板顏色就可以滿足顯示效果,而且得到的圖片相對也比較小,而jpg是有損的,在清晰的顏色過渡周圍會有大色塊,影響顯示效果。

將png24|32轉化為png8

png圖片的優化的很重要的一步:有些png24|32圖片本身顏色較為簡單,將其轉變為png8得到的顯示效果很類似,但卻能極大地減少圖片的大小。這一步可以通過使用工具pngGo來完成,這是一個完全免費的工具,而且可以根據需要設置png所需要的調色板顏色數,得到最大的壓縮效果。

使用smushit.it在線無損化壓縮

png格式將圖像信息保存在“塊”中,對於web顯示來說,大部分的“塊”都並非必要,所以優化策略可以將它們安全地刪除。雅虎的YSlow提供了一個在線的無損化壓縮工具smushit.it,不過基本上假如已經將圖片轉變為png8,使用smushit.it能壓縮的空間已經很小了,不過對於追求極致性能的web來說,還是值得一試的。

二、優化Cookie

什麼是Cookie

Cookie是存儲在客戶端的一小段文本信息,伴隨著用戶請求在浏覽器和服務器之間傳遞。Cookie除了核心對象key-value外,還有max-age,path,domain和httponly屬性。httponly屬性標識一個客戶端javascript能否操作這個Cookie;max-age表示緩存時間,單位為秒;domain代表域名,例如設置為.cnblog.com,則i.cnblogs.com也可以訪問這個Cookie,如果設置為i.cnblogs.com,則image.cnblogs.com這個域名下的資源將不能訪問這個Cookie;path代表文件路徑,默認為/,表示可以該domain下的所有資源可以訪問這個Cookie。浏覽器對單個Cookie大小限制不超過4KB;對於同一域名下Cookie的數量也有限制,一般不允許超過50個。

非持久Cookie和持久Cookie

假如Http請求響應頭部Set-Cookie的時候沒有給Cookie添加一個過期時間,則它的默認過期時間為當前浏覽會話結束,既退出浏覽器這個Cookie就無效了,這個Cookie就叫做非持久Cookie,因為是存儲在浏覽器進程的內存中的。

而如果給Cookie添加了一個過期時間,則Cookie信息將存儲到硬盤上,即使浏覽器退出這個Cookie還是存在的。只要Cookie未被清除且還在過期時間以內,這個Cookie就會在訪問對應域名的時候發送給服務器。

減少Cookie的體積

由於Cookie在訪問對應域名下的資源的時候都會通過Http請求發送到服務器,所以通過合理地設計Cookie,減少Cookie的體積,能夠減少Http請求報文的大小,提高響應速度。

通過使用不同的主機減少Cookie的使用

Cookie在訪問對應域名下的資源的時候都會通過Http請求發送到服務器,但是在訪問一些資源(例如js腳本,css和圖片)的時候,大多數情況下這些Cookie是多余的,所以我們可以通過使用不同的主機來存儲一些靜態資源,例如用專門的主機來存儲圖片,這樣訪問這些資源的時候就不會發送多余的Cookie,從而提高響應速度。

完整教程可查看:Web前端性能優化

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved