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

其實(shí)，使用第二種方法有明顯的好處。第一是，html文件體積比json文件小，加載量減少；第二是直接使用html文件，減少了JS動(dòng)態(tài)生成結(jié)構(gòu)的開(kāi)銷。

2.3 延時(shí)加載

對(duì)于一組有加載時(shí)間間隔的資源，我們其實(shí)可以對(duì)其做加載延時(shí)，按照其前后出現(xiàn)的順序，在時(shí)間間隔后即時(shí)加載下一個(gè)資源。例如輪播廣告就很適合這么做。

圖3-9 輪播廣告

2.3.1 輪播廣告

以往輪播廣告的加載模式是一次性全部加載，雖然采用延遲加載，但用戶可能不會(huì)瀏覽到所有的輪播廣告。當(dāng)用戶在首頁(yè)只停留5秒時(shí)（例如輪播廣告設(shè)置的是5秒切換一次），第二張廣告圖片以后的圖片加載就沒(méi)有必要了。

圖3-10 輪播廣告加載的請(qǐng)求瀑布圖

其實(shí)我們可以這樣，第一次加載第一張廣告圖片，當(dāng)5秒后，判斷第二張圖片是否加載過(guò)，如果沒(méi)有，加載第二張圖片，以此類推。判斷的方式很簡(jiǎn)單，我們只要在初期生成輪播廣告結(jié)構(gòu)的時(shí)候，不設(shè)置img標(biāo)簽的src屬性，然后加載時(shí)判斷這張圖片是否有src屬性，如果沒(méi)有，加載圖片并設(shè)置這個(gè)屬性。

圖3-11 判斷方式

這樣，如果用戶在首頁(yè)停留時(shí)長(zhǎng)只有14秒，那么就節(jié)省了第4、5張廣告圖片的下載量，大約有100K左右。

圖3-12 優(yōu)化后的請(qǐng)求瀑布圖

第3章 其他方式

3.1 文件壓縮

3.1.1 代碼

老生常談的方法。我們可以將代碼里多余的空格，回車，無(wú)用標(biāo)簽刪除，替換名字較長(zhǎng)的變量名等等方式減少腳本文件大小。

圖4-1 腳本壓縮對(duì)比

3.1.2 多媒體

對(duì)于圖片，不同格式，不同壓縮率都會(huì)造成圖片大小的千差萬(wàn)別。選擇一個(gè)合適并且圖片質(zhì)量可以接受的壓縮方式，可以節(jié)省很大一筆加載量。

圖4-2 圖片壓縮對(duì)比

對(duì)于視頻、音頻、Flash來(lái)說(shuō)，也都一樣，碼率、格式等等方面都會(huì)對(duì)大小造成影響。

圖4-3 視頻壓縮對(duì)比

3.2 CSS 3

CSS 3是一個(gè)不算太新，但由于我朝瀏覽器限制而得不到大范圍應(yīng)用的技術(shù)。其實(shí)我們可以在一些效果表現(xiàn)不是很重要的頁(yè)面使用CSS 3來(lái)針對(duì)瀏覽器做一些差異化效果，已達(dá)到減少加載量的目的。

3.2.1 替換圖片