HTML5 本地存儲(chǔ)和內(nèi)容按需加載的思路和方法是怎樣的，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

10年積累的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有順慶免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

HTML5自打出生就注定要開始它不平凡的一生，各大科技公司都對(duì)其寄予厚望，并紛紛進(jìn)行嘗試。蘋果、谷歌、微軟陸續(xù)推出HTML5展示頁(yè)面，各大視頻網(wǎng)站也相繼宣布支持HTML5視頻技術(shù)，HTML5地理定位技術(shù)更如雨后春筍，在國(guó)外社交網(wǎng)站得到應(yīng)用。

另一方面，在移動(dòng)設(shè)備平臺(tái)，iPhone的出貨量已經(jīng)超過(guò)1億部，而iPad的銷量也超過(guò)了1500萬(wàn)臺(tái)，iPad2也在首周銷量了近100萬(wàn)臺(tái)，銷售額達(dá)到95億，占整個(gè)平板市場(chǎng)份額的90%。我們知道，這倆不支持Flash，這個(gè)普及程度提醒我們，提高多平臺(tái)的兼容性勢(shì)在必行。

同時(shí)，在關(guān)注網(wǎng)站性能優(yōu)化的同時(shí)，我們應(yīng)該注意到減少用戶加載頁(yè)面時(shí)的加載量也是一個(gè)極其重要的方面。可以想象，一個(gè)日瀏覽量1000w次的網(wǎng)站，節(jié)省10K的下載量會(huì)有多好的效果，這對(duì)用戶的訪問(wèn)速度和服務(wù)器的負(fù)載都有極大的好處。

> 官網(wǎng)優(yōu)化情況

為了配合LOL不刪檔測(cè)試，并改善用戶瀏覽時(shí)的體驗(yàn)，官網(wǎng)在今年1月份開始了改版。官網(wǎng)嘗試采用全新的內(nèi)容布局思路，對(duì)用戶做更好的引導(dǎo)。本次改版，官網(wǎng)主要有以下四個(gè)方面的調(diào)整：大量去除上一版影響瀏覽的Flash動(dòng)畫，只保留首頁(yè)下載按鈕的Flash效果，加快了頁(yè)面的加載速度；引導(dǎo)頁(yè)對(duì)用戶進(jìn)行分流，獲取游戲資訊的用戶進(jìn)入官網(wǎng)，了解游戲玩法攻略的進(jìn)入戰(zhàn)爭(zhēng)學(xué)院；首頁(yè)增強(qiáng)了游戲活動(dòng)和賽事的展示，采用了不同以往的大型輪播廣告和占據(jù)頁(yè)面近三分之一空間的列表；增加了免費(fèi)英雄展示和游戲榮譽(yù)墻的部分。

另外針對(duì)現(xiàn)狀，官網(wǎng)通過(guò)采用HTML5本地存儲(chǔ)，內(nèi)容按需加載，延遲加載，文件壓縮，CSS Sprites等技術(shù)，使頁(yè)面性能得到了大幅度提升。另外采用HTML5視頻技術(shù)，使官網(wǎng)在蘋果移動(dòng)平臺(tái)上有很好的表現(xiàn)。

本文將著重介紹HTML5本地存儲(chǔ)和內(nèi)容按需加載的思路和方法，以及HTML5視頻技術(shù)的效果。LOL官網(wǎng)采用的減少加載量的方法，在首頁(yè)上為用戶節(jié)省了至少600K的下載量，同時(shí)大大減輕了服務(wù)器的負(fù)載。

首頁(yè)GTmetrix得分

整體健康度（其中首頁(yè)1秒健康度70%以上，2秒健康度80%以上，3秒健康度90%以上）

> 減少頁(yè)面加載量

減少頁(yè)面加載量最主要的目的是減少資源消耗，加快頁(yè)面的呈現(xiàn)速度。雖然延遲加載可以在一定程度上優(yōu)化頁(yè)面的性能，但不是所有的內(nèi)容都需要第一時(shí)間加載給用戶看或者重復(fù)加載的。比如用戶在瀏覽頁(yè)面第一屏的內(nèi)容，那么頁(yè)面在打開時(shí)就加載第一屏以下的一些內(nèi)容就不是很有必要。再或者，官網(wǎng)頁(yè)面中一些相同的部分，如導(dǎo)航、腳部聲明等部分，這些修改率極低的內(nèi)容每次都從服務(wù)器請(qǐng)求，在一定程度上增加了頁(yè)面加載的負(fù)荷。

減少頁(yè)面加載量的方法有很多，這次LOL官網(wǎng)改版主要用到了以下方法：

采用HTML5本地存儲(chǔ)技術(shù)，在用戶電腦里存儲(chǔ)頁(yè)面的一些內(nèi)容，如導(dǎo)航，合作媒體，腳部聲明等。這樣用戶在加載頁(yè)面時(shí)，瀏覽器直接從本地獲取這些內(nèi)容，在一定程度上減少了資源的消耗。

圖片隨滾動(dòng)條滾動(dòng)加載，使用戶在瀏覽頁(yè)面時(shí)，動(dòng)態(tài)按需加載圖片。比如，用戶在瀏覽第一屏內(nèi)容時(shí)，第一屏以后的圖片是沒(méi)有加載的，當(dāng)用戶滾動(dòng)頁(yè)面時(shí)，呈現(xiàn)在瀏覽器中的部分會(huì)動(dòng)態(tài)加載圖片。

優(yōu)化輪播廣告的加載方式，頁(yè)面打開時(shí)只加載第一張圖片，在輪播到第二張圖片時(shí)，才請(qǐng)求加載第二張圖片，以此類推。

按需加載頁(yè)卡的內(nèi)容，官網(wǎng)首頁(yè)右上角的新聞板塊，加載時(shí)只請(qǐng)求第一個(gè)頁(yè)卡的內(nèi)容，當(dāng)用戶點(diǎn)擊其他頁(yè)卡時(shí)，再加載頁(yè)卡的內(nèi)容。

> HTML5本地存儲(chǔ)

簡(jiǎn)單的說(shuō)，本地存儲(chǔ)就是為網(wǎng)頁(yè)通過(guò)客戶端網(wǎng)頁(yè)瀏覽器在本地存儲(chǔ)鍵值對(duì)的一個(gè)方法。就像Cookie，就算你離開了網(wǎng)站，關(guān)閉了瀏覽器標(biāo)簽，退出瀏覽器等等，數(shù)據(jù)也會(huì)一直存在。與Cookie不同的是，數(shù)據(jù)絕不會(huì)向遙遠(yuǎn)的網(wǎng)絡(luò)服務(wù)器傳送（除非你使用其他方法來(lái)手動(dòng)傳輸）。不同于提供長(zhǎng)期本地存儲(chǔ)的上述所有嘗試，它在網(wǎng)頁(yè)瀏覽器內(nèi)以原生的方式執(zhí)行，因此在第三方瀏覽器插件失效的情況下它也能有效執(zhí)行。

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

IE的本地存儲(chǔ)數(shù)據(jù)

userData是IE提供的一個(gè)本地存儲(chǔ)方法，他將需要存儲(chǔ)的內(nèi)容放置在本地的一個(gè)XML文件中，并在頁(yè)面的一個(gè)元素中設(shè)置一個(gè)調(diào)用的錨點(diǎn)。具體使用方法為：使用getElementById獲取頁(yè)面內(nèi)的一個(gè)元素，使用addBehavior(“#default#userData”)對(duì)其添加本地存儲(chǔ)的行為；使用setAttribute將需要存儲(chǔ)的內(nèi)容對(duì)其進(jìn)行賦值，并用save(“XXX”)方法將內(nèi)容存儲(chǔ)在名為XXX的XML文件中；使用load(“XXX”)方法加載本地的XXX.xml文件，并用getAttribute獲取已經(jīng)存儲(chǔ)的內(nèi)容。

Chrome的本地存儲(chǔ)數(shù)據(jù)

關(guān)于HTML5本地存儲(chǔ)localStorage的詳細(xì)方法，請(qǐng)參見HTML5 Web存儲(chǔ)。我的一個(gè)翻譯文檔《網(wǎng)絡(luò)應(yīng)用程序本地存儲(chǔ)的前世今生》也會(huì)稍后在博客放出。

對(duì)于具體實(shí)現(xiàn)上，我的做法是：先判斷本地是否存在已存儲(chǔ)的內(nèi)容，如果沒(méi)有數(shù)據(jù)或者版本已過(guò)期（版本其實(shí)是我設(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)中。

官網(wǎng)中，導(dǎo)航、合作媒體、健康游戲公告、腳部聲明、免費(fèi)英雄均采用本地存儲(chǔ)，將數(shù)據(jù)存儲(chǔ)在用戶的電腦中。

其中導(dǎo)航、榮譽(yù)墻、合作媒體、健康游戲公告、腳部聲明這5個(gè)靜態(tài)板塊的本地存儲(chǔ)應(yīng)用一共節(jié)省了10多K（IE的本地存儲(chǔ)文件實(shí)際有30K，是因?yàn)镮E對(duì)內(nèi)容中的字符進(jìn)行了轉(zhuǎn)義，以符合XML的規(guī)則）的下載量。

免費(fèi)英雄板塊屬于動(dòng)態(tài)板塊，里面的數(shù)據(jù)是通過(guò)游戲提供的一個(gè)json文件來(lái)獲取的（包含游戲里所有英雄的數(shù)據(jù)，每周的免費(fèi)英雄都會(huì)不同），將其本地存儲(chǔ)后，節(jié)省了500K的下載量。只是在每周一免費(fèi)英雄修改時(shí)，會(huì)重新下載一次。

> 圖片隨頁(yè)面滾動(dòng)加載

其實(shí)這是很多大型網(wǎng)站都使用了的方法，比如淘寶、拍拍等等。這次在游戲官網(wǎng)里做一個(gè)嘗試，效果不錯(cuò)，初期為首頁(yè)節(jié)省了幾十K的下載量，因?yàn)椴煌@示器分辨率不同，所以第一屏高度不一樣，這個(gè)數(shù)據(jù)有所浮動(dòng)。

滾動(dòng)時(shí)，當(dāng)前屏正在加載的圖片

首先，將圖片的路徑存儲(chǔ)在img標(biāo)簽的一個(gè)非src屬性中，LOL首頁(yè)是存儲(chǔ)在rel屬性中的，此舉是避免頁(yè)面直接加載圖片。然后使用JS的監(jiān)聽方法（IE是attachEvent，其他瀏覽器是addEventListener），監(jiān)聽頁(yè)面的scroll事件。一旦頁(yè)面滾動(dòng)，就會(huì)執(zhí)行一個(gè)編寫的函數(shù)，來(lái)判斷圖片是否處于瀏覽器的當(dāng)前一屏內(nèi)，如果是，將rel屬性內(nèi)的地址賦值給src屬性，如果不是，繼續(xù)監(jiān)聽。當(dāng)板塊內(nèi)的所有圖片都被加載后，取消監(jiān)聽。LOL官網(wǎng)首頁(yè)的活動(dòng)板塊和媒體合作板塊均使用了這種技術(shù)，大大減少了頁(yè)面的加載量。

> 輪播廣告按需加載

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

LOL官網(wǎng)首頁(yè)采用的方式是，第一次加載第一張廣告圖片，當(dāng)5秒后，判斷第二張圖片是否加載過(guò)，如果沒(méi)有，加載第二張圖片，以此類推。這樣，如果用戶在首頁(yè)停留時(shí)長(zhǎng)只有14秒，那么就節(jié)省了第4、5張廣告圖片的下載量，大約有100K左右。

> 頁(yè)卡內(nèi)容按需加載

對(duì)于新聞頁(yè)卡，以往的方式是使用include載入，并將看不到的頁(yè)卡隱藏掉。但如果用戶并沒(méi)有切換到其他頁(yè)卡，那么直接加載這些頁(yè)卡的內(nèi)容就是不必要的。

觸發(fā)加載頁(yè)卡內(nèi)容

LOL官網(wǎng)首頁(yè)頁(yè)卡采用的方式是，只加載第一個(gè)可見頁(yè)卡的內(nèi)容。當(dāng)用戶點(diǎn)擊切換頁(yè)卡時(shí)，再加載對(duì)應(yīng)頁(yè)卡的內(nèi)容。包括導(dǎo)航和榮譽(yù)墻這兩個(gè)部分，雖然是從本地加載數(shù)據(jù)，但也是用戶觸發(fā)后才插入到相應(yīng)結(jié)構(gòu)的。這樣不僅減少了一定的下載量，也減少了一部分瀏覽器的渲染工作。

> 多平臺(tái)兼容

平臺(tái)兼容問(wèn)題其實(shí)說(shuō)到底，還是瀏覽器的兼容問(wèn)題。在PC平臺(tái)，我們要兼容N多瀏覽器，在移動(dòng)平臺(tái)同樣如此。更恐怖的是，移動(dòng)平臺(tái)的瀏覽器種類和復(fù)雜度遠(yuǎn)遠(yuǎn)大于PC平臺(tái)。
所以LOL官網(wǎng)的多平臺(tái)兼容也只針對(duì)移動(dòng)平臺(tái)中的現(xiàn)代瀏覽器。

> 蘋果平臺(tái)

iPad下的引導(dǎo)頁(yè)

對(duì)于iPad和iPhone，主要問(wèn)題是其不支持Flash。LOL官網(wǎng)有兩處，一是引導(dǎo)頁(yè)的視頻，二是首頁(yè)的下載按鈕。實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，使用JS判斷瀏覽器信息（navigator.userAgent），如果是iPad和iPhone，使用HTML5視頻技術(shù)替換引導(dǎo)頁(yè)的Flash播放器，屏蔽首頁(yè)的Flash下載按鈕的插入，保持其為一個(gè)a標(biāo)簽的鏈接。具體方法請(qǐng)參見我在御龍?jiān)谔旃倬W(wǎng)改版時(shí)的文檔《御龍?jiān)谔斓膇Pad之路》。

> 谷歌平臺(tái)

對(duì)于Android系統(tǒng)的手機(jī)和平板電腦，并不需要做任何多余的事情，只要你的頁(yè)面符合標(biāo)準(zhǔn)，因?yàn)锳ndroid手機(jī)本身就支持Flash，經(jīng)過(guò)我的測(cè)試，LOL官網(wǎng)在HTC Desire下的瀏覽完全正常。

> 一些小技巧

> 更快的數(shù)據(jù)解析方式

我們通常使用json或者XML的方式來(lái)存儲(chǔ)大量數(shù)據(jù)。《高性能Javascript》一書中介紹了一種自定義格式，并測(cè)試出自定義格式是解析最快的。其方法是使用符號(hào)來(lái)間隔數(shù)據(jù)，比如var test=”1,2,3,4”，然后使用split(“,”)來(lái)方法來(lái)獲取各個(gè)數(shù)據(jù)。LOL官網(wǎng)就是用這種方式在本地存儲(chǔ)的數(shù)據(jù)。

> CSS Sprites

為了減少請(qǐng)求，LOL官網(wǎng)將每個(gè)頁(yè)面的小圖片都整合到其各自的一張大圖片中，首頁(yè)更是BT，整合圖片有90K。

首頁(yè)的整合圖片

> MP4文件大小控制

針對(duì)蘋果移動(dòng)平臺(tái)設(shè)備輸出的MP4文件需要控制大小，文件太大會(huì)造成瀏覽時(shí)很卡的感覺。畢竟移動(dòng)平臺(tái)設(shè)備的CPU還是不能和PC相比的。LOL引導(dǎo)頁(yè)的MP4文件就從最開始的10M壓縮到了6M。

> 函數(shù)執(zhí)行

LOL官網(wǎng)使用了大量的JS，尤其是首頁(yè)。如果一次性執(zhí)行大量函數(shù)，會(huì)造成CPU暫用率很高，頁(yè)面很卡的情況。因此，LOL官網(wǎng)使用了一個(gè)函數(shù)來(lái)間隔執(zhí)行這些函數(shù)。在頁(yè)面加載完成時(shí)，先一次性執(zhí)行必須馬上使用的幾個(gè)函數(shù)，然后以100毫秒為間隔，根據(jù)重要程度挨個(gè)執(zhí)行剩下的函數(shù)，以減輕CPU的負(fù)載。經(jīng)過(guò)對(duì)比，采用這種方式后，LOL官網(wǎng)首頁(yè)雖然JS使用比DNF官網(wǎng)首頁(yè)多很多，但加載時(shí)的CPU占用率比DNF還低5%左右。

> CSS選擇符

我們?cè)诰帉慍SS時(shí)，會(huì)有很多的選擇符，但不同的寫法，頁(yè)面在渲染時(shí)的效率是不一樣的。根據(jù)匹配規(guī)則，瀏覽器會(huì)從右至左匹配對(duì)應(yīng)的元素。比如.header li a{}，在渲染時(shí)，瀏覽器會(huì)先遍歷頁(yè)面內(nèi)所有的a標(biāo)簽，再遍歷這些a標(biāo)簽誰(shuí)在li標(biāo)簽內(nèi)，然后再去找他們誰(shuí)在.header下，這樣效率其實(shí)很低，而且開銷很大。其實(shí)我們可以對(duì)這些a標(biāo)簽直接寫個(gè)類名.header_lnk{}，這樣瀏覽器渲染時(shí)一下子就可以找到，避免再去翻箱倒柜。另外.header .header_lnk{}也是沒(méi)有必要的，直接寫.header_lnk{}效率更高，我們?yōu)槭裁催€要瀏覽器多過(guò)濾一次呢？

當(dāng)然，減少HTTP請(qǐng)求，使用延遲加載等等這些方法也是必不可少的。官網(wǎng)的優(yōu)化永無(wú)止盡，其實(shí)這次改版后的頁(yè)面還有很多地方可以優(yōu)化。比如減少頁(yè)面的初期渲染量，優(yōu)化JS以進(jìn)一步減小CPU占用率，兼容更多的移動(dòng)平臺(tái)等等。

看完上述內(nèi)容，你們掌握HTML5 本地存儲(chǔ)和內(nèi)容按需加載的思路和方法是怎樣的的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章標(biāo)題：HTML5本地存儲(chǔ)和內(nèi)容按需加載的思路和方法是怎樣的-創(chuàng)新互聯(lián)
路徑分享：http://aaarwkj.com/article24/dgdsce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、靜態(tài)網(wǎng)站、網(wǎng)站收錄、定制開發(fā)、外貿(mào)建站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)