在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()+(3652460601000));

var expires = date.toGMTString();

var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+

' expires='+expires+'; path=/';

document.cookie = cookiestr;

}

2. 使用 CSS动画，而不是JavaScript动画

使用CSS的动画，而不是JS动画。因为某些机器可以对CSS的动画进行GPU加速，而且也减少了JS文件请求。

div.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;

}

div.box.totheleft { left: 0px; }

div.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的时间，所以非常适合实时应用程序。