出了什么问题?
最近在用 PhoneGap 做手机端 App,第一个版本出来后,给人的整体感觉就是:卡!慢!非常卡!非常慢!
每次切换 tab 都要5秒左右,这个实在是无法接受啊。
慢不是你的错
本来,用 PhoneGap 就会让人产生质疑,它会不会很慢?
所以一出现慢的问题,大部分人一开始都会怪到 PhoneGap 头上吧?我一开始也在质疑自己,用 PhoneGap 是正确的选择吗?
但当我仔细思考后我发现,我们真的是错怪 PhoneGap 了,这个慢,真不是你的错!
为什么呢?
大家有没有数过手机上的新浪微博刷新一次要多久?
我家是 20M 电信,手机连 wifi,手机端新浪微博刷新一次要 3s 以上。
可… 我们的接口都在 3s 一下,却不如人家慢呢?
因为它做了很多优化!最关键的就是在缓存和分页的应用上了。
缓存设计逻辑
在参考了新浪微博的体验后,我觉得良好的体验应该是这样的:
如果第一次打开
这种场景就不用说了,肯定是要去调用接口的。
曾经打开过,App 关闭后重新打开
如下图:
最新的一条记录是在9月21日,打开 App 后直接显示上次加载的内容,App 没有自动请求数据。
这时候如果在下面 tab 中切换,也不会请求数据,所以速度非常快。
下拉刷新
有了缓存以后,用户需要对自己的数据可控,所以加下拉刷新以后,就可以让用户自己来控制何时刷新了。
网络没了,就不刷新;急着看新数据,就多刷几次。
缓存 + 上拉刷新是标配,有了这个功能后,整体的体验会非常棒!
进阶优化
说完了标配,就要说说可以让体验更上一层楼的进阶优化了。
加载失败的处理
手机App数据加载失败是一件很常见的事情,坐地铁遇到死角网络就断了。
如果这是用户正好在刷新数据怎么办?
第一个关键点:如果失败千万别把缓存的老数据清空了,好歹还可以看看以前的数据嘛。
第二个关键点:如果失败,给一个友好的提示,例如:“网络不佳,请重试…”。总之就是要告诉用户,他应该怎么做。
超时自动加载
如果缓存的数据放了很久了,其实重新打开 App 的时候可以考虑自动帮用户刷新的。
这里又要提到上面的一点了,加载失败别把老数据清空了!
考虑在后台异步检查是否有新数据
大家如果在看微博,50条看了你半个多小时,这半个多小时里,一定发生了很多很多事情…
微博客户端会在后台定时检查有多少心数据,然后会在左下角显示。
这样用户就知道他有没有必要去刷新一下数据了。
另外就算网络状况不佳,检查失败了,也不会影响用户当前的操作。
DOM元素优化
从性能上来看,Native App 肯定比 Html 的性能更好。
同样是一个 list,Html 可能在有 20 个 item 的时候就卡了,而 Native 可能要到 50 个 item才卡。
但是我依然不认为这是 PhoneGap 架构的严重问题。
是的,它不如 Native,但是就算你用 Native ,你也必须面对这个问题!
Native 的解决思路可能是复用 list 中的 item,那 Html 中为什么就不能这么做呢?
另外还有上拉加载更多,等等,这些不都是在解决 list 中元素过多的问题吗?
无论是 Native 还是 Html ,都会有同样的问题,你都要去解决,解决的思路也都很类似。
其他性能问题
虽说展示一个 list 页面,PhoneGap + Html 的性能问题可以克服靠代码克服,而且这个问题在 Native 里也有;
但如果你想在切换多页面的时候有切换动画,用 Html5 的效果还是会差许许多多的。
这时候,你可能就需要考虑一部分 Native 代码,一部分 Html 代码了。而实现这个的成本,不亚于直接用 Native 开发。
本作品由 Dozer 创作,采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。