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

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

圖4-4 綠色按鈕

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

圖4-5 CSS 3和圖片的大小對(duì)比

3.2.2 替換JS動(dòng)畫(huà)

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

圖4-6 CSS 3和JS的代碼量對(duì)比

3.3 服務(wù)器

3.3.1 GZIP

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

圖4-7 gzip效果

3.3.2 緩存

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

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

圖4-8 304 Not Modified

3.3.3 優(yōu)圖

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

圖4-9 優(yōu)圖

第4章 三個(gè)話題

4.1 對(duì)比

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

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

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