继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Cordova app 开发最佳实践

largeQ
关注TA
已关注
手记 960
粉丝 92
获赞 585

1)SPA是你的朋友

首先,Cordova 应用程序应该采用 SPA(单页面应用) 设计。 松散定义,SPA是从对网页发起请求开始运行的客户端应用。用户先加载一组最初资源(HTML,CSS 和 JavaScript脚本),进一步的更新(显示新视图,加载数据)通过 AJAX 来完成。SPAs 通常用在比较复杂的客户端应用上。GMail 是一个很好的例子,在加载完 GMail 之后,邮件的视图、编辑、组织都通过更新 DOM 来完成,而不是离开当前页面去加载一个全新的页面。

使用 SPA 可以帮你更高效地组织你的应用,对 Cordova 应用来说也有特定的好处。Cordova 应用必须等到 deviceready 事件触发之后才能使用插件。如果不使用 SPA,当用户从一个页面点击跳转到另一个页面,就必须等待 deviceready 事件再次触发才能使用插件。当应用变得越来越大,这点很容易被忽略。

即使你选择不用 Corodova,在创建应用时如果不使用单页面结构也会有严重的性能影响。这是因为页面之间导航跳转需要加载脚本,资源等等,即使这些资源被缓存下来,仍然会存在性能问题。

在 Cordova 应用里面可以使用的一些 SPA 库:

还有很多很多......

2)性能考虑

考虑下面的问题以提高移动应用性能:

Click VS Touch

你可能犯的最大也是最简单的错误就是使用 click 事件,虽然在手机上用得好好的,但在大部分的设备上,为了把它和 touchhold 事件区分开,会强制延迟 300ms。使用 touchstart 或者 touchend 事件会得到极大的改善,300ms 听起来不多,但可能会导致不流畅的 UI 更新和行为。你可能会考虑到在非 webkit 的浏览器上不支持 touch 事件,看CanIUse。为了处理这些限制,你可以 checkout 像 HandJS 和 Fastclick 这样的库。

CSS转换 VS DOM操作

使用硬件加速CSS转换比使用JavaScript创建动画要好很多。请看后面的资源清单。

网络抽风

好吧,网络并不总是抽风,但即使好的手机网络也会有延迟,甚至比你想象中还要严重。一个每 30s 下载 500 行 JSON 数据的桌面应用,在手机上或者电池猪上会更慢。要记住:Cordova 应用有多种方法持久化数据,比如:LocalStorage 和 file system。在本地缓存数据并弄清来回发送的数据的数量,这在你的应用使用蜂窝网络连接时尤其重要。

其它性能方面的文章和资源

3)识别并处理离线状态

从上面关于网络的技巧可看到,不仅可能会遇到慢网络,应用还可能会进入离线状态。你的应用应该智能地处理这种情况。否则,人们会认为你的应用死掉了。这很容易处理(Crodova 支持监听 offlineonline事件),应用绝对没有理由在离线状态下不给出好的响应。确保测试(看下面的测试章节)并确保测试从一种状态切换到另一种状态应用是如何处理的。

注意,onlineoffline事件以及网络连接 API 不是完美的。可能需要依赖使用 XHR 请求来查看设备是真的离线或在线。最后,确保为网络问题增加技术支持表单。实际上,Apple 商店(或者其它商店)会拒绝没有恰当处理离线/在线状态的应用。关于这个主题,请看 "Is This Thing On?"

译自 :Best Practices Cordova app development



作者:码不停蹄的忧伤
链接:https://www.jianshu.com/p/9247f7281c4d


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP