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

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

2.3 延時加載

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

圖3-9 輪播廣告

2.3.1 輪播廣告

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

圖3-10 輪播廣告加載的請求瀑布圖

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

圖3-11 判斷方式

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

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

第3章 其他方式

3.1 文件壓縮

3.1.1 代碼

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

圖4-1 腳本壓縮對比

3.1.2 多媒體

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

圖4-2 圖片壓縮對比

對于視頻、音頻、Flash來說，也都一樣，碼率、格式等等方面都會對大小造成影響。

圖4-3 視頻壓縮對比

3.2 CSS 3

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

3.2.1 替換圖片