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

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

同時，在關注網站性能優化的同時，我們應該注意到減少用戶加載頁面時的加載量也是一個極其重要的方面。可以想象，一個日瀏覽量1000w次的網站，節省10K的下載量會有多好的效果，這對用戶的訪問速度和服務器的負載都有極大的好處。

> 官網優化情況

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

另外針對現狀，官網通過采用HTML5本地存儲，內容按需加載，延遲加載，文件壓縮，CSS Sprites等技術，使頁面性能得到了大幅度提升。另外采用HTML5視頻技術，使官網在蘋果移動平臺上有很好的表現。

本文將著重介紹HTML5本地存儲和內容按需加載的思路和方法，以及HTML5視頻技術的效果。LOL官網采用的減少加載量的方法，在首頁上為用戶節省了至少600K的下載量，同時大大減輕了服務器的負載。

首頁GTmetrix得分

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

> 減少頁面加載量

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

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

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

圖片隨滾動條滾動加載，使用戶在瀏覽頁面時，動態按需加載圖片。比如，用戶在瀏覽第一屏內容時，第一屏以后的圖片是沒有加載的，當用戶滾動頁面時，呈現在瀏覽器中的部分會動態加載圖片。

優化輪播廣告的加載方式，頁面打開時只加載第一張圖片，在輪播到第二張圖片時，才請求加載第二張圖片，以此類推。

按需加載頁卡的內容，官網首頁右上角的新聞板塊，加載時只請求第一個頁卡的內容，當用戶點擊其他頁卡時，再加載頁卡的內容。

> HTML5本地存儲

簡單的說，本地存儲就是為網頁通過客戶端網頁瀏覽器在本地存儲鍵值對的一個方法。就像Cookie，就算你離開了網站，關閉了瀏覽器標簽，退出瀏覽器等等，數據也會一直存在。與Cookie不同的是，數據絕不會向遙遠的網絡服務器傳送（除非你使用其他方法來手動傳輸）。不同于提供長期本地存儲的上述所有嘗試，它在網頁瀏覽器內以原生的方式執行，因此在第三方瀏覽器插件失效的情況下它也能有效執行。

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

IE的本地存儲數據

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

Chrome的本地存儲數據

關于HTML5本地存儲localStorage的詳細方法，請參見HTML5 Web存儲。我的一個翻譯文檔《網絡應用程序本地存儲的前世今生》也會稍后在博客放出。

對于具體實現上，我的做法是：先判斷本地是否存在已存儲的內容，如果沒有數據或者版本已過期（版本其實是我設置的一個變量，當修改這個變量時即為版本過期），加載相應的JS數據，通過一個函數將數據處理為需要的格式，然后存儲在本地；如果有且版本沒過期，直接從本地獲取數據。接著將數據通過函數進行進一步的處理，插入相對應的結構中。

官網中，導航、合作媒體、健康游戲公告、腳部聲明、免費英雄均采用本地存儲，將數據存儲在用戶的電腦中。

其中導航、榮譽墻、合作媒體、健康游戲公告、腳部聲明這5個靜態板塊的本地存儲應用一共節省了10多K（IE的本地存儲文件實際有30K，是因為IE對內容中的字符進行了轉義，以符合XML的規則）的下載量。

免費英雄板塊屬于動態板塊，里面的數據是通過游戲提供的一個json文件來獲取的（包含游戲里所有英雄的數據，每周的免費英雄都會不同），將其本地存儲后，節省了500K的下載量。只是在每周一免費英雄修改時，會重新下載一次。

> 圖片隨頁面滾動加載

其實這是很多大型網站都使用了的方法，比如淘寶、拍拍等等。這次在游戲官網里做一個嘗試，效果不錯，初期為首頁節省了幾十K的下載量，因為不同顯示器分辨率不同，所以第一屏高度不一樣，這個數據有所浮動。

滾動時，當前屏正在加載的圖片

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

> 輪播廣告按需加載

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

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

> 頁卡內容按需加載

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

觸發加載頁卡內容

LOL官網首頁頁卡采用的方式是，只加載第一個可見頁卡的內容。當用戶點擊切換頁卡時，再加載對應頁卡的內容。包括導航和榮譽墻這兩個部分，雖然是從本地加載數據，但也是用戶觸發后才插入到相應結構的。這樣不僅減少了一定的下載量，也減少了一部分瀏覽器的渲染工作。

> 多平臺兼容

平臺兼容問題其實說到底，還是瀏覽器的兼容問題。在PC平臺，我們要兼容N多瀏覽器，在移動平臺同樣如此。更恐怖的是，移動平臺的瀏覽器種類和復雜度遠遠大于PC平臺。
所以LOL官網的多平臺兼容也只針對移動平臺中的現代瀏覽器。

> 蘋果平臺

iPad下的引導頁

對于iPad和iPhone，主要問題是其不支持Flash。LOL官網有兩處，一是引導頁的視頻，二是首頁的下載按鈕。實現起來很簡單，使用JS判斷瀏覽器信息（navigator.userAgent），如果是iPad和iPhone，使用HTML5視頻技術替換引導頁的Flash播放器，屏蔽首頁的Flash下載按鈕的插入，保持其為一個a標簽的鏈接。具體方法請參見我在御龍在天官網改版時的文檔《御龍在天的iPad之路》。

> 谷歌平臺

對于Android系統的手機和平板電腦，并不需要做任何多余的事情，只要你的頁面符合標準，因為Android手機本身就支持Flash，經過我的測試，LOL官網在HTC Desire下的瀏覽完全正常。

> 一些小技巧

> 更快的數據解析方式

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

> CSS Sprites

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

首頁的整合圖片

> MP4文件大小控制

針對蘋果移動平臺設備輸出的MP4文件需要控制大小，文件太大會造成瀏覽時很卡的感覺。畢竟移動平臺設備的CPU還是不能和PC相比的。LOL引導頁的MP4文件就從最開始的10M壓縮到了6M。

> 函數執行

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

> CSS選擇符

我們在編寫CSS時，會有很多的選擇符，但不同的寫法，頁面在渲染時的效率是不一樣的。根據匹配規則，瀏覽器會從右至左匹配對應的元素。比如.header li a{}，在渲染時，瀏覽器會先遍歷頁面內所有的a標簽，再遍歷這些a標簽誰在li標簽內，然后再去找他們誰在.header下，這樣效率其實很低，而且開銷很大。其實我們可以對這些a標簽直接寫個類名.header_lnk{}，這樣瀏覽器渲染時一下子就可以找到，避免再去翻箱倒柜。另外.header .header_lnk{}也是沒有必要的，直接寫.header_lnk{}效率更高，我們為什么還要瀏覽器多過濾一次呢？

> 結束語

當然，減少HTTP請求，使用延遲加載等等這些方法也是必不可少的，具體請參見《DNF官網整容手冊》。官網的優化永無止盡，其實這次改版后的頁面還有很多地方可以優化。比如減少頁面的初期渲染量，優化JS以進一步減小CPU占用率，兼容更多的移動平臺等等。希望此文檔能在今后各個產品的官網改版上幫助到各位同學。