如何优化Html5 App 在IOS/Android 上的性能
2013-09-02 09:40
489 查看
自己做html5 app 在移动端也不少时间了,html5 + javascript + css 将会有越来越多的人使用,跨平台的技术大潮已经到来。总结下一些经验。
1, 如果做手机端,千万不要使用jquery mobile, 因为它很垃圾!
Sencha touch 是一个非常好的选择。Sencha touch,但是它只支持Webkit....所以其实并非真正跨平台,因为 firefox 无法使用。。
2, 在老的设备上测试! 你的app 在iphone5/4s 上跑的飞快,根本无差异与native... 但是到3g/3gs 上呢?你的很多优化其实都是针对这些老设备的。
3,0.3秒 mobile safari 上自设的延迟。 如果你使用click event, 那这个会是系统默认的,所以使用其他的event 去避免这个延迟,比如说touch 或者 tap
4,不要使用Text-Shadow 或者Box-Shadow 的CSS 属性,千万不要! 他们会很慢很慢
5, 预先加载图片!Preload images 非常重要,因为你不想让用户看到你的界面一部分先显示,但是一两块地方还在loading,这一下子就降低了用户体验,所以预载图片吧。。 如何做? 这是我们使用的代码
<style type="text/css">
body:after{content:url('resources/images/preload1.png')url('resources/images/preaload2.png')
url('resources/images/preload3.png') ;display:none;}
</style>
1, 如果做手机端,千万不要使用jquery mobile, 因为它很垃圾!
Sencha touch 是一个非常好的选择。Sencha touch,但是它只支持Webkit....所以其实并非真正跨平台,因为 firefox 无法使用。。
2, 在老的设备上测试! 你的app 在iphone5/4s 上跑的飞快,根本无差异与native... 但是到3g/3gs 上呢?你的很多优化其实都是针对这些老设备的。
3,0.3秒 mobile safari 上自设的延迟。 如果你使用click event, 那这个会是系统默认的,所以使用其他的event 去避免这个延迟,比如说touch 或者 tap
4,不要使用Text-Shadow 或者Box-Shadow 的CSS 属性,千万不要! 他们会很慢很慢
5, 预先加载图片!Preload images 非常重要,因为你不想让用户看到你的界面一部分先显示,但是一两块地方还在loading,这一下子就降低了用户体验,所以预载图片吧。。 如何做? 这是我们使用的代码
<style type="text/css">
body:after{content:url('resources/images/preload1.png')url('resources/images/preaload2.png')
url('resources/images/preload3.png') ;display:none;}
</style>
相关文章推荐
- fir.im Weekly - 如何进行 Android App 性能优化
- android开发,如何优化app的性能
- fir.im Weekly - 如何进行 Android App 性能优化
- iOS App性能优化
- 如何进行Android、IOS APP的自动化测试—东舟自动化测试解决方案
- [Android]如何做一个崩溃率少于千分之三噶应用app(18)-组件化与插件化优化
- Android性能优化之如何避免Overdraw
- 十大技巧优化Android App性能
- iOS App性能优化
- iOS app性能优化的那些事(一)
- Android App优化之性能分析工具
- Android App性能优化(一)之布局优化
- 优化Android App性能?十大技巧
- Android性能优化系列之App启动优化
- 十大技巧优化Android App性能
- 十大技巧优化Android App性能
- Android 优化性能之 如何避免--过度绘制
- android 优化Android App性能?十大技巧必知!
- Android app性能优化解决卡慢顿之布局优化
- android app性能优化大汇总