HTML5自打出生就注定要開始它不平凡的一生，各大科技公司都對其寄予厚望，并紛紛進行嘗試。蘋果、谷歌、微軟陸續(xù)推出HTML5展示頁面，各大視頻網(wǎng)站也相繼宣布支持HTML5視頻技術(shù)，HTML5地理定位技術(shù)更如雨后春筍，在國外社交網(wǎng)站得到應(yīng)用。
另一方面，在移動設(shè)備平臺，iPhone的出貨量已經(jīng)超過1億部，而iPad的銷量也超過了1500萬臺，iPad2也在首周銷量了近100萬臺，銷售額達(dá)到95億，占整個平板市場份額的90%。我們知道，這倆不支持Flash，這個普及程度提醒我們，提高多平臺的兼容性勢在必行。
同時，在關(guān)注網(wǎng)站性能優(yōu)化的同時，我們應(yīng)該注意到減少用戶加載頁面時的加載量也是一個極其重要的方面?？梢韵胂螅粋€日瀏覽量1000w次的網(wǎng)站，節(jié)省10K的下載量會有多好的效果，這對用戶的訪問速度和服務(wù)器的負(fù)載都有極大的好處。
> 官網(wǎng)優(yōu)化情況
為了配合LOL不刪檔測試，并改善用戶瀏覽時的體驗，官網(wǎng)在今年1月份開始了改版。官網(wǎng)嘗試采用全新的內(nèi)容布局思路，對用戶做更好的引導(dǎo)。本次改版，官網(wǎng)主要有以下四個方面的調(diào)整：大量去除上一版影響瀏覽的Flash動畫，只保留首頁下載按鈕的Flash效果，加快了頁面的加載速度；引導(dǎo)頁對用戶進行分流，獲取游戲資訊的用戶進入官網(wǎng)，了解游戲玩法攻略的進入戰(zhàn)爭學(xué)院；首頁增強了游戲活動和賽事的展示，采用了不同以往的大型輪播廣告和占據(jù)頁面近三分之一空間的列表；增加了免費英雄展示和游戲榮譽墻的部分。
另外針對現(xiàn)狀，官網(wǎng)通過采用HTML5本地存儲，內(nèi)容按需加載，延遲加載，文件壓縮，CSS Sprites等技術(shù)，使頁面性能得到了大幅度提升。另外采用HTML5視頻技術(shù)，使官網(wǎng)在蘋果移動平臺上有很好的表現(xiàn)。
本文將著重介紹HTML5本地存儲和內(nèi)容按需加載的思路和方法，以及HTML5視頻技術(shù)的效果。LOL官網(wǎng)采用的減少加載量的方法，在首頁上為用戶節(jié)省了至少600K的下載量，同時大大減輕了服務(wù)器的負(fù)載。
首頁GTmetrix得分
整體健康度（其中首頁1秒健康度70%以上，2秒健康度80%以上，3秒健康度90%以上）
> 減少頁面加載量
減少頁面加載量最主要的目的是減少資源消耗，加快頁面的呈現(xiàn)速度。雖然延遲加載可以在一定程度上優(yōu)化頁面的性能，但不是所有的內(nèi)容都需要第一時間加載給用戶看或者重復(fù)加載的。比如用戶在瀏覽頁面第一屏的內(nèi)容，那么頁面在打開時就加載第一屏以下的一些內(nèi)容就不是很有必要。再或者，官網(wǎng)頁面中一些相同的部分，如導(dǎo)航、腳部聲明等部分，這些修改率極低的內(nèi)容每次都從服務(wù)器請求，在一定程度上增加了頁面加載的負(fù)荷。
減少頁面加載量的方法有很多，這次LOL官網(wǎng)改版主要用到了以下方法：
采用HTML5本地存儲技術(shù)，在用戶電腦里存儲頁面的一些內(nèi)容，如導(dǎo)航，合作媒體，腳部聲明等。這樣用戶在加載頁面時，瀏覽器直接從本地獲取這些內(nèi)容，在一定程度上減少了資源的消耗。
圖片隨滾動條滾動加載，使用戶在瀏覽頁面時，動態(tài)按需加載圖片。比如，用戶在瀏覽第一屏內(nèi)容時，第一屏以后的圖片是沒有加載的，當(dāng)用戶滾動頁面時，呈現(xiàn)在瀏覽器中的部分會動態(tài)加載圖片。
優(yōu)化輪播廣告的加載方式，頁面打開時只加載第一張圖片，在輪播到第二張圖片時，才請求加載第二張圖片，以此類推。
按需加載頁卡的內(nèi)容，官網(wǎng)首頁右上角的新聞板塊，加載時只請求第一個頁卡的內(nèi)容，當(dāng)用戶點擊其他頁卡時，再加載頁卡的內(nèi)容。
> HTML5本地存儲
簡單的說，本地存儲就是為網(wǎng)頁通過客戶端網(wǎng)頁瀏覽器在本地存儲鍵值對的一個方法。就像Cookie，就算你離開了網(wǎng)站，關(guān)閉了瀏覽器標(biāo)簽，退出瀏覽器等等，數(shù)據(jù)也會一直存在。與Cookie不同的是，數(shù)據(jù)絕不會向遙遠(yuǎn)的網(wǎng)絡(luò)服務(wù)器傳送（除非你使用其他方法來手動傳輸）。不同于提供長期本地存儲的上述所有嘗試，它在網(wǎng)頁瀏覽器內(nèi)以原生的方式執(zhí)行，因此在第三方瀏覽器插件失效的情況下它也能有效執(zhí)行。
我們對于支持HTML5的瀏覽器(Firefox、Chrome、Safari、Opera等)，使用HTML5的localStorage提供的方法；對于IE瀏覽器，使用IE提供的userData方法；對于其他瀏覽器使用常規(guī)方法加載內(nèi)容。
IE的本地存儲數(shù)據(jù)
userData是IE提供的一個本地存儲方法，他將需要存儲的內(nèi)容放置在本地的一個XML文件中，并在頁面的一個元素中設(shè)置一個調(diào)用的錨點。具體使用方法為：使用getElementById獲取頁面內(nèi)的一個元素，使用addBehavior(“#default#userData”)對其添加本地存儲的行為；使用setAttribute將需要存儲的內(nèi)容對其進行賦值，并用save(“XXX”)方法將內(nèi)容存儲在名為XXX的XML文件中；使用load(“XXX”)方法加載本地的XXX.xml文件，并用getAttribute獲取已經(jīng)存儲的內(nèi)容。
Chrome的本地存儲數(shù)據(jù)
關(guān)于HTML5本地存儲localStorage的詳細(xì)方法，請參見HTML5 Web存儲。我的一個翻譯文檔《網(wǎng)絡(luò)應(yīng)用程序本地存儲的前世今生》也會稍后在博客放出。
對于具體實現(xiàn)上，我的做法是：先判斷本地是否存在已存儲的內(nèi)容，如果沒有數(shù)據(jù)或者版本已過期（版本其實是我設(shè)置的一個變量，當(dāng)修改這個變量時即為版本過期），加載相應(yīng)的JS數(shù)據(jù)，通過一個函數(shù)將數(shù)據(jù)處理為需要的格式，然后存儲在本地；如果有且版本沒過期，直接從本地獲取數(shù)據(jù)。接著將數(shù)據(jù)通過函數(shù)進行進一步的處理，插入相對應(yīng)的結(jié)構(gòu)中。
官網(wǎng)中，導(dǎo)航、合作媒體、健康游戲公告、腳部聲明、免費英雄均采用本地存儲，將數(shù)據(jù)存儲在用戶的電腦中。
其中導(dǎo)航、榮譽墻、合作媒體、健康游戲公告、腳部聲明這5個靜態(tài)板塊的本地存儲應(yīng)用一共節(jié)省了10多K（IE的本地存儲文件實際有30K，是因為IE對內(nèi)容中的字符進行了轉(zhuǎn)義，以符合XML的規(guī)則）的下載量。
免費英雄板塊屬于動態(tài)板塊，里面的數(shù)據(jù)是通過游戲提供的一個json文件來獲取的（包含游戲里所有英雄的數(shù)據(jù)，每周的免費英雄都會不同），將其本地存儲后，節(jié)省了500K的下載量。只是在每周一免費英雄修改時，會重新下載一次。
> 圖片隨頁面滾動加載
其實這是很多大型網(wǎng)站都使用了的方法，比如淘寶、拍拍等等。這次在游戲官網(wǎng)里做一個嘗試，效果不錯，初期為首頁節(jié)省了幾十K的下載量，因為不同顯示器分辨率不同，所以第一屏高度不一樣，這個數(shù)據(jù)有所浮動。
滾動時，當(dāng)前屏正在加載的圖片
首先，將圖片的路徑存儲在img標(biāo)簽的一個非src屬性中，LOL首頁是存儲在rel屬性中的，此舉是避免頁面直接加載圖片。然后使用JS的監(jiān)聽方法（IE是attachEvent，其他瀏覽器是addEventListener），監(jiān)聽頁面的scroll事件。一旦頁面滾動，就會執(zhí)行一個編寫的函數(shù)，來判斷圖片是否處于瀏覽器的當(dāng)前一屏內(nèi)，如果是，將rel屬性內(nèi)的地址賦值給src屬性，如果不是，繼續(xù)監(jiān)聽。當(dāng)板塊內(nèi)的所有圖片都被加載后，取消監(jiān)聽。LOL官網(wǎng)首頁的活動板塊和媒體合作板塊均使用了這種技術(shù)，大大減少了頁面的加載量。
> 輪播廣告按需加載
以往輪播廣告的加載模式是一次性全部加載，雖然采用延遲加載，但用戶可能不會瀏覽到所有的輪播廣告。當(dāng)用戶在首頁只停留5秒時（LOL官網(wǎng)首頁輪播廣告設(shè)置的是5秒切換一次），第二張廣告圖片以后的圖片加載就沒有必要了。
LOL官網(wǎng)首頁采用的方式是，第一次加載第一張廣告圖片，當(dāng)5秒后，判斷第二張圖片是否加載過，如果沒有，加載第二張圖片，以此類推。這樣，如果用戶在首頁停留時長只有14秒，那么就節(jié)省了第4、5張廣告圖片的下載量，大約有100K左右。
> 頁卡內(nèi)容按需加載
對于新聞頁卡，以往的方式是使用include載入，并將看不到的頁卡隱藏掉。但如果用戶并沒有切換到其他頁卡，那么直接加載這些頁卡的內(nèi)容就是不必要的。
觸發(fā)加載頁卡內(nèi)容
LOL官網(wǎng)首頁頁卡采用的方式是，只加載第一個可見頁卡的內(nèi)容。當(dāng)用戶點擊切換頁卡時，再加載對應(yīng)頁卡的內(nèi)容。包括導(dǎo)航和榮譽墻這兩個部分，雖然是從本地加載數(shù)據(jù)，但也是用戶觸發(fā)后才插入到相應(yīng)結(jié)構(gòu)的。這樣不僅減少了一定的下載量，也減少了一部分瀏覽器的渲染工作。
> 多平臺兼容
平臺兼容問題其實說到底，還是瀏覽器的兼容問題。在PC平臺，我們要兼容N多瀏覽器，在移動平臺同樣如此。更恐怖的是，移動平臺的瀏覽器種類和復(fù)雜度遠(yuǎn)遠(yuǎn)大于PC平臺。
所以LOL官網(wǎng)的多平臺兼容也只針對移動平臺中的現(xiàn)代瀏覽器。
> 蘋果平臺
iPad下的引導(dǎo)頁
對于iPad和iPhone，主要問題是其不支持Flash。LOL官網(wǎng)有兩處，一是引導(dǎo)頁的視頻，二是首頁的下載按鈕。實現(xiàn)起來很簡單，使用JS判斷瀏覽器信息（navigator.userAgent），如果是iPad和iPhone，使用HTML5視頻技術(shù)替換引導(dǎo)頁的Flash播放器，屏蔽首頁的Flash下載按鈕的插入，保持其為一個a標(biāo)簽的鏈接。具體方法請參見我在御龍在天官網(wǎng)改版時的文檔《御龍在天的iPad之路》。
> 谷歌平臺
對于Android系統(tǒng)的手機和平板電腦，并不需要做任何多余的事情，只要你的頁面符合標(biāo)準(zhǔn)，因為Android手機本身就支持Flash，經(jīng)過我的測試，LOL官網(wǎng)在HTC Desire下的瀏覽完全正常。
> 一些小技巧
> 更快的數(shù)據(jù)解析方式
我們通常使用json或者XML的方式來存儲大量數(shù)據(jù)?！陡咝阅躂avascript》一書中介紹了一種自定義格式，并測試出自定義格式是解析最快的。其方法是使用符號來間隔數(shù)據(jù)，比如var test=”1,2,3,4”，然后使用split(“,”)來方法來獲取各個數(shù)據(jù)。LOL官網(wǎng)就是用這種方式在本地存儲的數(shù)據(jù)。
> CSS Sprites
為了減少請求，LOL官網(wǎng)將每個頁面的小圖片都整合到其各自的一張大圖片中，首頁更是BT，整合圖片有90K。
首頁的整合圖片
> MP4文件大小控制
針對蘋果移動平臺設(shè)備輸出的MP4文件需要控制大小，文件太大會造成瀏覽時很卡的感覺。畢竟移動平臺設(shè)備的CPU還是不能和PC相比的。LOL引導(dǎo)頁的MP4文件就從最開始的10M壓縮到了6M。
> 函數(shù)執(zhí)行
LOL官網(wǎng)使用了大量的JS，尤其是首頁。如果一次性執(zhí)行大量函數(shù)，會造成CPU暫用率很高，頁面很卡的情況。因此，LOL官網(wǎng)使用了一個函數(shù)來間隔執(zhí)行這些函數(shù)。在頁面加載完成時，先一次性執(zhí)行必須馬上使用的幾個函數(shù)，然后以100毫秒為間隔，根據(jù)重要程度挨個執(zhí)行剩下的函數(shù)，以減輕CPU的負(fù)載。經(jīng)過對比，采用這種方式后，LOL官網(wǎng)首頁雖然JS使用比DNF官網(wǎng)首頁多很多，但加載時的CPU占用率比DNF還低5%左右。
> CSS選擇符
我們在編寫CSS時，會有很多的選擇符，但不同的寫法，頁面在渲染時的效率是不一樣的。根據(jù)匹配規(guī)則，瀏覽器會從右至左匹配對應(yīng)的元素。比如.header li a{}，在渲染時，瀏覽器會先遍歷頁面內(nèi)所有的a標(biāo)簽，再遍歷這些a標(biāo)簽誰在li標(biāo)簽內(nèi)，然后再去找他們誰在.header下，這樣效率其實很低，而且開銷很大。其實我們可以對這些a標(biāo)簽直接寫個類名.header_lnk{}，這樣瀏覽器渲染時一下子就可以找到，避免再去翻箱倒柜。另外.header .header_lnk{}也是沒有必要的，直接寫.header_lnk{}效率更高，我們?yōu)槭裁催€要瀏覽器多過濾一次呢？
> 結(jié)束語
當(dāng)然，減少HTTP請求，使用延遲加載等等這些方法也是必不可少的，具體請參見《DNF官網(wǎng)整容手冊》。官網(wǎng)的優(yōu)化永無止盡，其實這次改版后的頁面還有很多地方可以優(yōu)化。比如減少頁面的初期渲染量，優(yōu)化JS以進一步減小CPU占用率，兼容更多的移動平臺等等。希望此文檔能在今后各個產(chǎn)品的官網(wǎng)改版上幫助到各位同學(xué)。
