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

圖2-8 IE的本地存儲(chǔ)數(shù)據(jù)

關(guān)于HTML5本地存儲(chǔ)localStorage的詳細(xì)方法，請(qǐng)參見(jiàn)我的翻譯文章《網(wǎng)絡(luò)應(yīng)用程序本地存儲(chǔ)的前世今生》。

圖2-9 Chrome的本地存儲(chǔ)數(shù)據(jù)

對(duì)于IE瀏覽器，使用IE提供的userData方法；對(duì)于支持HTML5的瀏覽器(Firefox、Chrome、Safari、Opera等)，使用localStorage提供的方法；對(duì)于其他瀏覽器使用常規(guī)方法加載內(nèi)容。

圖2-10 判斷流程

1.2.2 資源處理

對(duì)于本地存儲(chǔ)，我們可以使用來(lái)存儲(chǔ)數(shù)據(jù)，或者能轉(zhuǎn)為數(shù)據(jù)形式的文件。例如一些SEO要求不高的文字，鏈接等等。

圖2-11 數(shù)據(jù)存儲(chǔ)

對(duì)于圖片、CSS、JS等文件，我們也可以轉(zhuǎn)為文本來(lái)存儲(chǔ)在本地。這種方式大量應(yīng)用于移動(dòng)端。例如《掌上英雄聯(lián)盟》APP的圖片大部分都轉(zhuǎn)化為base64編碼存儲(chǔ)在本地（不用離線存儲(chǔ)的原因前面提及了）。Google和Bing的移動(dòng)版，也將CSS和JS拆分后本地存儲(chǔ)了。

圖2-12 腳本的本地存儲(chǔ)

圖2-13 圖片轉(zhuǎn)base64編碼后的本地存儲(chǔ)

另外，對(duì)于本地存儲(chǔ)更新，我的做法是：先判斷本地是否存在已存儲(chǔ)的內(nèi)容，如果沒(méi)有數(shù)據(jù)或者版本已過(guò)期（所謂版本是我設(shè)置的一個(gè)變量，當(dāng)修改這個(gè)變量時(shí)即為版本過(guò)期），加載相應(yīng)的JS數(shù)據(jù)，通過(guò)一個(gè)函數(shù)將數(shù)據(jù)處理為需要的格式，然后存儲(chǔ)在本地；如果有且版本沒(méi)過(guò)期，直接從本地獲取數(shù)據(jù)。接著將數(shù)據(jù)通過(guò)函數(shù)進(jìn)行進(jìn)一步的處理，插入相對(duì)應(yīng)的結(jié)構(gòu)中。

圖2-14 本地?cái)?shù)據(jù)版本判斷

第2章 按需加載

2.1 滾動(dòng)加載

2.1.1 滾動(dòng)加載的方法

其實(shí)這是很多大型網(wǎng)站都使用了的方法，比如淘寶、拍拍等等。對(duì)于不同顯示器分辨率不同，所以第一屏高度不一樣，節(jié)省的加載量所浮動(dòng)。

首先，記錄所有需要滾動(dòng)加載對(duì)象的縱坐標(biāo)值到一個(gè)數(shù)組。然后使用JS的監(jiān)聽(tīng)方法（IE是attachEvent，其他瀏覽器是addEventListener）