在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('https://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的时间，所以非常适合实时应用程序。