日常HTML5开发中如何加速应用

  小程序刷爆朋友，HTML5跨平台、开发成本低、开发速度快的优点结合APP发展成新局势，WEB app成为流行，应用打开加载速度是一个App评判优异的重要因素，那么日常 HTML5开发中如何加速应用。
1.使用CSS转换效果
  使用CSS转换效果来替换JavaScript的方法可以提升页面元素在两种状态进行转换的速度，通过使用totheleft和totheright你可以迅速移动一个框。使用CSS的方法可减少页面的代码量，而且动画的执行也更加快速。
2.使用HTML5表单和输入框
  HTML5引入很多全新的表单属性和输入框类型，虽然并不是所有的浏览器都支持，但它们的确都很有用：
autofocus使得页面加载完毕后自动为某个输入框设置输入焦点
placeholder允许你为输入框设置默认文本，并在获取焦点时自动清除
required属性要求必须填写值后才能提交表单
pattern可以通过正则表达式指定输入框允许输入的内容
  因为这些功能都是内置的，无需使用JavaScript方法来实现，第一是节省开发时间，同时也让页面具有更好的适应性。
3.使用HTML5Web存储
  但你需要在浏览器上存储一些数据时，你可能会首先考虑到Cookie，这些Cookie在每次浏览器请求时都会附带上。而HTML5更有效的方法就是本地存储——WebStorage。
  有两个WebStorage对象分别是：sessionStorage和localStorage，这些存储的数据是不会通过HTTP请求来传输的，因此不会对请求的时间参数任何影响,例如：
//checktoseeiflocalstorageispresent(browsersupportsHTML5)
if(('localStorage'inwindow)&&window.localStorage!==null){
//storeitems
localStorage.wishlist='["Bear","Cow","Pig"]';
}
比使用Cookie的方法更加简单，无需指定失效时间
4.使用WebWorkers
  WebWorkers是HTML5规范内容之一，用于提供后台脚本运行支持。相当于是多线程的处理环境。示例代码：
varworker=newWorker('doWork.js');
worker.addEventListener('message',function(e){
console.log('Workersaid:',e.data);
},false);
worker.postMessage('HelloWorld');//Senddatatoourworker.
  WebWorkers可在很多场景下使用，例如图片处理、文本格式和以及大文件接收和处理等等。
5.使用应用程序缓存
  应用程序缓存可以让你创建完全支持离线浏览的Web应用，降低服务器负载以及更快的体验速度。可通过缓存的manifest文件来指定要缓存的文件，manifest只是一个简单的文本文件，下面是一个示例：
CACHEMANIFEST
#2011-06-18:v3
#Explicitlycachedentries
index.htm
style.css
#offline.htmwillbedisplayediftheuserisoffline
FALLBACK:
//offline.htm
你需要在HTML页面中启用缓存
<htmlmanifest="http://www.example.com/example.appcache">
...
</html>
  Manifest缓存文件可以定义缓存任意的文件扩展名，但你需要在Web服务器上设置对应的MIME类型，例如在Apache上：
AddTypetext/cache-manifest.appcache
  使用应用程序缓存，你只需要简单几步就可以创建离线的Web应用，访问是非常快速，适合用来处理一些不经常更新的静态文件。
6.使用WebSockets
  WebSockets用来实现跟远程主机的双路通讯，例如在Web浏览器和远程服务器之间，这是一个非常轻量级的通讯架构，带宽占用以及性能方面比标准HTTP要减少3~5倍。
  因为WebSockets必须使用80端口，因此WebSockets不仅用来创建跟快速的通讯接口，还可以在HTTP之上实现跟高级的双路通讯。
7.使用CSS替代图片
  使用CSS特效而不是图片是一个很简单的用来提升网页速度的方法，因为你无需重开HTTP请求来获取图片，而且一般图片大小也比几行CSS代码要大得多，下面是一些你可以用来替换图片的CSS特效：
CSSMasks
Box-shadow
Transforms
RGBA/Alphaopacity
Border-radius
Linearandradialgradients
8.使用客户端数据库
  目前，主流浏览器在客户端数据库的支持上还没达成一致，除了WebSQL数据库和IndexedDB以外。通过对数据库的使用可以大大提升客户端数据存储的速度，而不是将数据重新发给服务器端。不仅可以减少HTTP请求，还可以大大降低服务器负载。
9.使用硬件加速
  现在浏览器对硬件加速的支持还不普遍。如果你的应用有动画或者3D效果，那么启用硬件加速直接让GPU进行处理会大大提升这些动画和3D的速度。要使用硬件加速你需要用HTML5的Canvas。