HTML5 本地存儲和內容按需加載的思路和方法

2020-03-24 16:28:01

字體：大中小

來源：轉載

供稿：網友

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的下載量，同時大大減輕了服務器的負載。HTML5 Web存儲。我的一個翻譯文檔《網絡html' target='_blank'>應用程序本地存儲的前世今生》也會稍后在博客放出。對于具體實現上，我的做法是：先判斷本地是否存在已存儲的內容，如果沒有數據或者版本已過期（版本其實是我設置的一個變量，當修改這個變量時即為版本過期），加載相應的JS數據，通過一個函數將數據處理為需要的格式，然后存儲在本地；如果有且版本沒過期，直接從本地獲取數據。接著將數據通過函數進行進一步的處理，插入相對應的結構中。網址中，導航、合作媒體、健康游戲公告、腳部聲明、免費英雄均采用本地存儲，將數據存儲在用戶的電腦中。其中導航、榮譽墻、合作媒體、健康游戲公告、腳部聲明這5個靜態板塊的本地存儲應用一共節省了10多K（IE的本地存儲文件實際有30K，是因為IE對內容中的字符進行了轉義，以符合XML的規則）的下載量。免費英雄板塊屬于動態板塊，里面的數據是通過游戲提供的一個json文件來獲取的（包含游戲里所有英雄的數據，每周的免費英雄都會不同），將其本地存儲后，節省了500K的下載量。只是在每周一免費英雄修改時，會重新下載一次。圖片隨頁面滾動加載其實這是很多大型網站都使用了的方法，比如淘寶、拍拍等等。這次在游戲網址里做一個嘗試，效果不錯，初期為首頁節省了幾十K的下載量，因為不同顯示器分辨率不同，所以第一屏高度不一樣，這個數據有所浮動。《御龍在天的iPad之路》。谷歌平臺對于Android系統的手機和平板電腦，并不需要做任何多余的事情，只要你的頁面符合標準，因為Android手機本身就支持Flash，經過我的測試，LOL網址在HTC Desire下的瀏覽完全正常。一些小技巧更快的數據解析方式我們通常使用json或者XML的方式來存儲大量數據。《高性能Javascript》一書中介紹了一種自定義格式，并測試出自定義格式是解析最快的。其方法是使用符號來間隔數據，比如var test= 1,2,3,4 ，然后使用split( , )來方法來獲取各個數據。LOL網址就是用這種方式在本地存儲的數據。 CSS Sprites為了減少請求，LOL網址將每個頁面的小圖片都整合到其各自的一張大圖片中，首頁更是BT，整合圖片有90K。《DNF網址整容手冊》。網址的優化永無止盡，其實這次改版后的頁面還有很多地方可以優化。比如減少頁面的初期渲染量，優化JS以進一步減小CPU占用率，兼容更多的移動平臺等等。希望此文檔能在今后各個產品的網址改版上幫助到各位同學。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：深入淺析HTML5中的SVG

下一篇：關于HTML中部分標簽的嵌套問題詳細介紹（圖）