本文是Web前端性能優(yōu)化系列文章中的第九篇，主要講述內(nèi)容：圖像和Cookie優(yōu)化。完整教程可查看：Web前端性能優(yōu)化

一、 圖像優(yōu)化

圖像基礎(chǔ)知識(shí)

gif: 適用于動(dòng)畫效果，例如提示的滾動(dòng)條圖案

jpg: 是一種使用有損壓縮的圖片格式，它將圖片的每個(gè)像素分解成8*8的柵格，然后對(duì)每個(gè)柵格的數(shù)據(jù)進(jìn)行壓縮處理，通過(guò)特殊的算法用附近的顏色填充柵格，隱藏細(xì)節(jié)。用戶可以設(shè)置質(zhì)量級(jí)別，從0到100，數(shù)字越少圖片質(zhì)量就越差。

png：是一種使用無(wú)損壓縮的圖片格式，它將圖片上出現(xiàn)的顏色進(jìn)行索引，保留在“調(diào)色板”上，PNG在顯示圖像的時(shí)候就會(huì)調(diào)用調(diào)色板的顏色去填充相應(yīng)的位置。png又分為png8，png24和png32；png8表示支持2^8個(gè)種顏色，通常情況下png8是最通用的web圖片格式。

選擇jpg還是png

對(duì)比jpg和png的特點(diǎn)，不同的圖像使用不同的格式能得到最佳壓縮效果。對(duì)于層次豐富顏色較多的圖像，使用jpg更好，因?yàn)闉榱撕芎玫娘@示這種圖像，png將使用調(diào)色板顏色更為豐富的png24，這樣圖片大小會(huì)比jpg大。而對(duì)于顏色簡(jiǎn)單對(duì)比強(qiáng)烈的圖像，使用png更好，因?yàn)閜ng使用較少的調(diào)色板顏色就可以滿足顯示效果，而且得到的圖片相對(duì)也比較小，而jpg是有損的，在清晰的顏色過(guò)渡周圍會(huì)有大色塊，影響顯示效果。

將png24|32轉(zhuǎn)化為png8

png圖片的優(yōu)化的很重要的一步：有些png24|32圖片本身顏色較為簡(jiǎn)單，將其轉(zhuǎn)變?yōu)閜ng8得到的顯示效果很類似，但卻能極大地減少圖片的大小。這一步可以通過(guò)使用工具pngGo來(lái)完成，這是一個(gè)完全免費(fèi)的工具，而且可以根據(jù)需要設(shè)置png所需要的調(diào)色板顏色數(shù)，得到最大的壓縮效果。

使用smushit.it在線無(wú)損化壓縮

png格式將圖像信息保存在“塊”中，對(duì)于web顯示來(lái)說(shuō)，大部分的“塊”都并非必要，所以優(yōu)化策略可以將它們安全地刪除。雅虎的YSlow提供了一個(gè)在線的無(wú)損化壓縮工具smushit.it，不過(guò)基本上假如已經(jīng)將圖片轉(zhuǎn)變?yōu)閜ng8，使用smushit.it能壓縮的空間已經(jīng)很小了，不過(guò)對(duì)于追求極致性能的web來(lái)說(shuō)，還是值得一試的。

二、優(yōu)化Cookie

什么是Cookie

Cookie是存儲(chǔ)在客戶端的一小段文本信息，伴隨著用戶請(qǐng)求在瀏覽器和服務(wù)器之間傳遞。Cookie除了核心對(duì)象key-value外，還有max-age，path，domain和httponly屬性。httponly屬性標(biāo)識(shí)一個(gè)客戶端javascript能否操作這個(gè)Cookie；max-age表示緩存時(shí)間，單位為秒；domain代表域名，例如設(shè)置為.cnblog.com，則i.cnblogs.com也可以訪問(wèn)這個(gè)Cookie，如果設(shè)置為i.cnblogs.com，則image.cnblogs.com這個(gè)域名下的資源將不能訪問(wèn)這個(gè)Cookie；path代表文件路徑，默認(rèn)為/，表示可以該domain下的所有資源可以訪問(wèn)這個(gè)Cookie。瀏覽器對(duì)單個(gè)Cookie大小限制不超過(guò)4KB；對(duì)于同一域名下Cookie的數(shù)量也有限制，一般不允許超過(guò)50個(gè)。

非持久Cookie和持久Cookie

假如Http請(qǐng)求響應(yīng)頭部Set-Cookie的時(shí)候沒(méi)有給Cookie添加一個(gè)過(guò)期時(shí)間，則它的默認(rèn)過(guò)期時(shí)間為當(dāng)前瀏覽會(huì)話結(jié)束，既退出瀏覽器這個(gè)Cookie就無(wú)效了，這個(gè)Cookie就叫做非持久Cookie，因?yàn)槭谴鎯?chǔ)在瀏覽器進(jìn)程的內(nèi)存中的。

而如果給Cookie添加了一個(gè)過(guò)期時(shí)間，則Cookie信息將存儲(chǔ)到硬盤上，即使瀏覽器退出這個(gè)Cookie還是存在的。只要Cookie未被清除且還在過(guò)期時(shí)間以內(nèi)，這個(gè)Cookie就會(huì)在訪問(wèn)對(duì)應(yīng)域名的時(shí)候發(fā)送給服務(wù)器。

減少Cookie的體積

由于Cookie在訪問(wèn)對(duì)應(yīng)域名下的資源的時(shí)候都會(huì)通過(guò)Http請(qǐng)求發(fā)送到服務(wù)器，所以通過(guò)合理地設(shè)計(jì)Cookie，減少Cookie的體積，能夠減少Http請(qǐng)求報(bào)文的大小，提高響應(yīng)速度。

通過(guò)使用不同的主機(jī)減少Cookie的使用

Cookie在訪問(wèn)對(duì)應(yīng)域名下的資源的時(shí)候都會(huì)通過(guò)Http請(qǐng)求發(fā)送到服務(wù)器，但是在訪問(wèn)一些資源（例如js腳本，css和圖片）的時(shí)候，大多數(shù)情況下這些Cookie是多余的，所以我們可以通過(guò)使用不同的主機(jī)來(lái)存儲(chǔ)一些靜態(tài)資源，例如用專門的主機(jī)來(lái)存儲(chǔ)圖片，這樣訪問(wèn)這些資源的時(shí)候就不會(huì)發(fā)送多余的Cookie，從而提高響應(yīng)速度。

完整教程可查看：Web前端性能優(yōu)化

標(biāo)簽： Web前端性能優(yōu)化教程 Web前端性能優(yōu)化 Web優(yōu)化 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。