TGideas實例：加載，不只是少一點點(6)

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

圖4-4 綠色按鈕

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

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

3.2.2 替換JS動畫

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

圖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)容，需要返回一個304 Not Modified，并且過期時間是GMT時間，一旦客戶端日期不準確，可能導(dǎo)致失效。Cache-Control是HTTP1.1的內(nèi)容，使用文件自身的age值來做和請求時間對比，相對穩(wěn)定。

圖4-8 304 Not Modified

3.3.3 優(yōu)圖

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

圖4-9 優(yōu)圖

第4章 三個話題

4.1 對比

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

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

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