在HTML5中如何提高網站前端效能的範例程式碼分析

1.    用web storage取代cookies

Cookie最大的問題是每次都會跟在請求後面。在HTML5中，用sessionStorage和localStorage把使用者資料直接在客戶端，這樣可以減少HTTP請求的資料量。而且Web storage還提供了API來操作數據，不像cookie，還得自己寫。

 // if localStorage is present, use that
 if (('localStorage' in window) && window.localStorage !== null) {
 
   // easy object property API
   localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
 
 } else {
 
   // without sessionStorage we'll have to use a far-future cookie
   //   with document.cookie's awkward API :(
   var date = new Date();
   date.setTime(date.getTime()+(365*24*60*60*1000));
   var expires = date.toGMTString();
   var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                   ' expires='+expires+'; path=/';
   document.cookie = cookiestr;
 }

2.    使用 CSS動畫，而不是JavaScript動畫

使用CSS的動畫，而不是JS動畫。因為某些機器可以對CSS的動畫進行GPU加速，而且也減少了JS檔案請求。

 p.box {
   left: 40px;
   -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
           transition: all 0.3s ease-out;
 }
 p.box.totheleft { left: 0px; }
 p.box.totheright { left: 80px; }

3.    使用客戶端資料庫

使用Web SQLDatabase或IndexedDB這類用戶端資料庫，可以減少HTTP請求的數量。向地區列表，像好友列表這樣的資料就可以直接儲存在客戶端。有時你也可以使用sessionStorage和localStorage，因為一般來說，這類相比更快。

4.    直接使用JS的新功能

JS已經有了很大的發展，例如Array引進了許多新的方法，例如map,filter, forEach等。另外JSON也直接嵌入瀏覽器了，不需要再引進json2.js檔了。

// Give me a new array of all values multiplied by 10.
 [5, 6, 7, 8, 900].map(function(value) { return value * 10; });
 // [50, 60, 70, 80, 9000]
 
 // Create links to specs and drop them into #links.
 ['html5', 'css3', 'webgl'].forEach(function(value) {
   var linksList = document.querySelector('#links');
   var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
   linksList.innerHTML +=  newLink;
 });
 
 // Return a new array of all mathematical constants under 2.
 [3.14, 2.718, 1.618].filter(function(number) {
   return number < 2;
 });
 // [1.618]
 
 // You can also use these extras on other collections like nodeLists.
 [].forEach.call(document.querySelectorAll(&#39;section[data-bucket]&#39;), function(elem, i) {
   localStorage[&#39;bucket&#39; + i] = elem.getAttribute(&#39;data-bucket&#39;);
 });

5.    快取HTML標記

透過緩存，把HTML檔案緩存在客戶端。不過這些快取的HTML檔案只有結構，沒有內容，內容需要透過JS操作JSON物件來把資料填入頁面中。這樣的HTML檔相當於模板。

6.    使用硬體加速

現在領先的瀏覽已經啟用了GPU等級的硬體加速，透過某些指示或hack可以開啟這些硬體加速。例如CSS中使用3D轉換或動畫，就可以開啟GPU硬體加速。

   .hwaccel { -webkit-transform: translateZ(0); }

7.    耗CPU的操作用WebWorker來完成

對於需要處理比較耗時或耗CPU的操作，使用WebWorker，這個不僅快，而且是在後台操作的，不影響正常瀏覽器互動。

8.    使用form的新的特性

HTML的form加入了很多新的屬性、元素和驗證功能，使用這些新的功能可以減少JS和CSS的介入。

9.    使用CSS3的替換CSS精靈

使用CSS3可以達到一些CSS sprites的效果，也許100位元組左右的CSS就可以替換2K的image sprites，而且請求數量也大減少了。

CSS3比較常用的特效包括：圓角，漸變，陰影，透明，變形，遮罩等。

10.  對於即時應用程序，使用WebSocket替換XHR

WebSocket最早是用來設計取代Ajax輪詢方式的，它比Ajax的好處在於比Ajax輕量，使用更少的頻寬。根據某些報道，WebSocket比Ajax大約要減少30%的傳輸量，而且速度也大約要快35倍。愛立信在測試WebSocket效能時發現，使用ping指令都要比WebSocket多消耗3到5的時間，所以非常適合即時應用程式。

以上是在HTML5中如何提高網站前端效能的範例程式碼分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！