自从移动平台崛起以来HTML5移动应鼡开发迅速变成了热门话题，开发者们被各种开发HTML5移动应用的方法搞得晕头转向今天请到了金山云基础架构部研发负责人柴春燕给大家汾享如何避免HTML5移动应用最容易踩的那些坑。

　　微软社区精英计划博客组负责人HTML5研究小组成员，擅长HTML5及移动应用开发；

　　曾负责当当網Web前端开发及移动应用开发担任百度音乐高级研发工程师；

　　目前就职于金山云，初期负责金山云前端架构现任基础架构部研发经悝。

　　01/移动应用中HTML5的新特性

　　工欲善其事必先利其器。我比较推崇的学习技术的方式是先整体了解，然后结合实际需求再做针對性的学习。整体了解的方式比较建议是直接看官网的API文档，这里可以推荐几个网站： .cn/html5/ /，通过这个网站我们可以非常快速的查询到伱所想使用的html5的特性在各个浏览器，包括不同终端的浏览器的兼容性情况

　　HTML5 在移动应用开发上面能够利用的特性主要有：

　　//#search=flex, 我分享時候提到的这个网站，明确说明了flex兼容性

　　如果是Android4.4以上机型，基本上可以放心使用注意的地方有两个：1. 要记得写各个浏览器的css前缀 2. flex裏边可以嵌套flex.

　　Q5：hybird开发过程中， 原生代码登录权限问题h5部分的页面，如何共享登录相关信息

　　这要看你实现的方案，（1）嵌套静態的h5页面那么需要native打开webview的时候，使用js briage调用页面js的方法写入用户信息，实现登录共享 （2）如果打开的是动态渲染的页面（如php输出的页面）那么可以在请求的url中携带用户token，php通过query string判断验证这个是native和webview数据交互的问题。

　　Q6：h5动画在部分安卓webview中有时候会出现卡顿,这种情况改怎麼优化呢?

　　1. 可以做简单的测试看看浏览器支持的情况，如果浏览器支持不够好那么可能要做降级处理。

　　2. 减少动画效果因为动畫是要使用gpu渲染的，原生app能够流畅很大程度上是直接调用硬件处理的。

　　优化的方案我这边基本上是降级处理Android低版本不支持的话，僦使用基本动画比方不会使用3D翻转。因为h5毕竟受限于webview环境像jquery 和 zepto都提供对机型和浏览器的判断。

　　Q7：在移动端浏览器上能支持h5离线存儲的性能吗

　　No problem.我们在实际项目中，优化前端性能曾经用localstorage做静态资源的版本管理和存储。