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

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

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

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

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

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

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

首頁GTmetrix得分

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

> 減少頁面加載量

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

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

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

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

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

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

> HTML5本地存儲(chǔ)

簡單的說，本地存儲(chǔ)就是為網(wǎng)頁通過客戶端網(wǎng)頁瀏覽器在本地存儲(chǔ)鍵值對(duì)的一個(gè)方法。就像Cookie，就算你離開了網(wǎng)站，關(guān)閉了瀏覽器標(biāo)簽，退出瀏覽器等等，數(shù)據(jù)也會(huì)一直存在。與Cookie不同的是，數(shù)據(jù)絕不會(huì)向遙遠(yuǎn)的網(wǎng)絡(luò)服務(wù)器傳送（除非你使用其他方法來手動(dòng)傳輸）。不同于提供長期本地存儲(chǔ)的上述所有嘗試，它在網(wǎng)頁瀏覽器內(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文件中，并在頁面的一個(gè)元素中設(shè)置一個(gè)調(diào)用的錨點(diǎn)。具體使用方法為：使用getElementById獲取頁面內(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)容，如果沒有數(shù)據(jù)或者版本已過期（版本其實(shí)是我設(shè)置的一個(gè)變量，當(dāng)修改這個(gè)變量時(shí)即為版本過期），加載相應(yīng)的JS數(shù)據(jù)，通過一個(gè)函數(shù)將數(shù)據(jù)處理為需要的格式，然后存儲(chǔ)在本地；如果有且版本沒過期，直接從本地獲取數(shù)據(jù)。接著將數(shù)據(jù)通過函數(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ù)是通過游戲提供的一個(gè)json文件來獲取的（包含游戲里所有英雄的數(shù)據(jù)，每周的免費(fèi)英雄都會(huì)不同），將其本地存儲(chǔ)后，節(jié)省了500K的下載量。只是在每周一免費(fèi)英雄修改時(shí)，會(huì)重新下載一次。

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

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

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

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

> 輪播廣告按需加載

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

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

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

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

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

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

> 多平臺(tái)兼容

平臺(tái)兼容問題其實(shí)說到底，還是瀏覽器的兼容問題。在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)頁

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

> 谷歌平臺(tái)

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

> 一些小技巧

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

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

> CSS Sprites

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

首頁的整合圖片

> MP4文件大小控制

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

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

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

> CSS選擇符

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

> 結(jié)束語

當(dāng)然，減少HTTP請(qǐng)求，使用延遲加載等等這些方法也是必不可少的，具體請(qǐng)參見《DNF官網(wǎng)整容手冊(cè)》。官網(wǎng)的優(yōu)化永無止盡，其實(shí)這次改版后的頁面還有很多地方可以優(yōu)化。比如減少頁面的初期渲染量，優(yōu)化JS以進(jìn)一步減小CPU占用率，兼容更多的移動(dòng)平臺(tái)等等。希望此文檔能在今后各個(gè)產(chǎn)品的官網(wǎng)改版上幫助到各位同學(xué)。