TGideas實(shí)例：加載，不只是少一點(diǎn)點(diǎn)(6)

對于移動(dòng)端，或者一些PC頁面，我們可以用CSS 3來替換一些圖片效果，比如漸變、陰影、圓角等等。

圖4-4 綠色按鈕

例如圖4-4中的綠色按鈕，使用CSS 3漸變和圖片所造成的加載量差距很大，在能使用CSS 3的時(shí)候，盡量不要使用圖片。

圖4-5 CSS 3和圖片的大小對比

3.2.2 替換JS動(dòng)畫

一些對象移動(dòng)、寬高變換等效果，其實(shí)可以使用CSS 3動(dòng)畫來實(shí)現(xiàn)。例如使用CSS 3和JS，來實(shí)現(xiàn)一個(gè)對象左右切換的效果，需要的代碼量如圖4-6所示。我們可以看到，CSS 3的代碼量極少，而且執(zhí)行過程中沒有JS那些復(fù)雜的運(yùn)算。

圖4-6 CSS 3和JS的代碼量對比

3.3 服務(wù)器

3.3.1 GZIP

雅虎13條里的內(nèi)容。其壓縮比例很大，大部分網(wǎng)站都使用了。

圖4-7 gzip效果

3.3.2 緩存

設(shè)置Expires、Cache-Control以減少頁面加載量，使瀏覽器從本地讀取緩存。

Expires和Cache-Control max-age均用于檢測文件是否過期，如果沒有，瀏覽器讀取本地緩存。Expires是HTTP1.0的內(nèi)容，需要返回一個(gè)304 Not Modified，并且過期時(shí)間是GMT時(shí)間，一旦客戶端日期不準(zhǔn)確，可能導(dǎo)致失效。Cache-Control是HTTP1.1的內(nèi)容，使用文件自身的age值來做和請求時(shí)間對比，相對穩(wěn)定。

圖4-8 304 Not Modified

3.3.3 優(yōu)圖

優(yōu)圖是公司開發(fā)的，用于圖片無損壓縮的系統(tǒng)。目前互娛已經(jīng)接入，在圖片上傳到服務(wù)器時(shí)，自動(dòng)進(jìn)行無損壓縮，加載量減少的效果非常明顯。

圖4-9 優(yōu)圖

第4章 三個(gè)話題

4.1 對比

在以前一次分享文檔中，有同學(xué)提問為啥要拋開瀏覽器與服務(wù)器的緩存機(jī)制，自己實(shí)現(xiàn)一套本地存儲(chǔ)機(jī)制，有沒有什么特別的優(yōu)勢。其實(shí)相對與傳統(tǒng)緩存來說，本地存儲(chǔ)的好處有4點(diǎn)。

一是，對于存儲(chǔ)需要處理的數(shù)據(jù)來說，本地存儲(chǔ)可以在第一次加載的時(shí)候就將處理的數(shù)據(jù)存在本地，而傳統(tǒng)緩存策略需要每次加載的時(shí)候都處理一次數(shù)據(jù)。

二是，本地存儲(chǔ)相對穩(wěn)定，有獨(dú)立的存儲(chǔ)空間，一般不