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('section[data-bucket]'), function(elem, i) {
localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});登入後複製
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中文網其他相關文章！
