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本地存儲技術，在用戶電腦里存儲頁面的一些內容，如導航，合作媒體，腳部聲明等。這樣用戶在加載頁面時，瀏覽器直接從本地獲取這些內容，在一定程度上減少了資源的消耗。
圖片隨滾動條滾動網站建設中加載，使用戶在瀏覽頁面時，動態按需網站建設中加載圖片。比如，用戶在瀏覽第一屏內容時，第一屏以后的圖片是沒有網站建設中加載的，當用戶滾動頁面時，呈現在瀏覽器中的部分會動態加載圖片。
優化輪播廣告的網站建設中加載方式，頁面打開時只網站建設中加載第一張圖片，在輪播到第二張圖片時，才請求加載第二張圖片，以此類推。
按需網站建設中加載頁卡的內容，官網首頁右上角的新聞板塊，網站建設中加載時只請求第一個頁卡的內容，當用戶點擊其他頁卡時，再網站建設中加載頁卡的內容。
我們的承諾：
天惠公司將一如既往，秉承專業服務精神，一切從客戶利益出發，為您率先建站,令您把握先機，長遠的眼光定使您在商海搏擊中穩操勝券。
