用Web Storage替换Cookies
是不是得在网页制作过程里保存点啥自家数据吖？这太平常不过了！原来大家都习惯用Cookies，可是没注意到每次发出新请求都带着个“Cookie”的小尾巴，有点麻烦哟。HTML 5可是给力，新添了两个好帮手——SessionStorage跟LocalStorage，这下子再也不需要老是传递那个烦人的小家伙了，简单得多了呗！而且，Web Storage还有它自己的API，操作起来可是舒服多了。
使用CSS动画，而不是JavaScript动画
// 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;
}
你知道吗？网站设计过程中，使用CSS动画能让我们的客户用起来更舒服！就拿这个来说，有些电脑上可以利用GPU加速帮助css动画加快运行速度。再者，因为不需要加载JavaScript文件，所以页面加载得也快多了。
使用客户端数据库
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; }
咱们搞开发的时候，不妨试试在网页里用客户端的那种数据库，比如说Web SQL Database或者是IndexedDB，这样我们就不用老是频繁地跟服务器打交道了，尤其是那些常用数据（比如地区列表什么的）都可以储存在用户的电脑上。另外，SessionStorage和LocalStorage这两个也是不错的选择，用着方便快捷。
直接使用JS的新功能
JavaScript最近变化好大，功能新增了很多实用又方便的东西。举个例子，你看那个叫数组的家伙，现今变得超级厉害，添加了像map、filter这样的牛逼方法，简单几步就能搞定以前费劲儿才能完成的数据处理工作。还有，现在浏览器都变得更好了，自带了一个叫做JSON的东东，再也不用惦记着下载json2.js这么麻烦了，这不是帮我们省了许多时间吗？
缓存HTML标记
想找个快捷方式快速网上冲浪？那就把HTML模板页面存起来~就是那些只有框架，没啥图片和文字的模板网页。打开网页后，用个小脚本JS，处理一下JSON对象，把咱们需要的信息填上就好了。这么一弄，网站都变轻巧多了哟~
// 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');
});
使用硬件加速
现在流行的浏览器都有GPU加速功能了，你知道吗？用几个简单的编码方法或小技巧就能开启它。例如，只要给CSS加点3D特效或动画，就能提高网页加载速度和显示效果！
耗CPU的操作用WebWorker来完成
当你遇到耗时费CPU的网页任务，试试Web Worker，它不仅能帮你处理快如闪电，还能保证界面不卡顿！
使用form的新特性
HTML里面的表单给升级！多了很多新属性、元素还有验证功能，这样一来，咱们不用再纠结是不是要用JavaScript和CSS了？善用这些新东西的话，还可以使代码更加简洁明了，从而提高用户体验！
.hwaccel { -webkit-transform: translateZ(0); }
使用CSS3替换CSS精灵
借助CSS3强大的功能，我们能用更少的代码实现和CSS精灵差不多的效果。比如要做圆形边角或是过渡色啊、阴影这类效果，全都能在CSS3里轻松搞定。而透明度这个特色也不用担心，CSS3照样能实现。此外，这样还能减少HTTP请求次数。
对于实时应用程序，使用WebSocket替换XHR
其实不光有XHR（就是我们熟悉的XMLHttpRequest嘛），还有个WebSocket也是蛮好用的。这个小玩意儿虽然轻巧但能很快传递信息，就像砍掉了30%的数据似的，速度快得惊人，比XHR还快好多倍！尤其适合那种需要即时响应的应用程序。
评论0