文档章节

Corvoda官方网站的最佳实践和性能优化

煮酒科技
 煮酒科技
发布于 2015/03/05 15:53
字数 883
阅读 78
收藏 0

Best Practices

1) SPA Is Your Friend

First and foremost - your Cordova applications should adopt the SPA (Single Page Application) design. Loosely defined, a SPA is a client-side application that is run from one request of a web page. The user loads an initial set of resources (HTML, CSS, and JavaScript) and further updates (showing a new view, loading data) is done via AJAX. SPAs are commonly used for more complex client-side applications. GMail is a great example of this. After you load GMail, mail views, editing, and organization are all done by updating the DOM instead of actually leaving the current page to load a completely new one.

Using a SPA can help you organize your application in a more efficient manner, but it also has specific benefits for Cordova applications. A Cordova application must wait for the deviceready event to fire before any plugins may be used. If you do not use a SPA, and your user clicks to go from one page to another, you will have to wait for deviceready to fire again before you make use of a plugin. This is easy to forget as your application gets larger.

Even if you choose not to use Cordova, creating a mobile application without using a single page architecture will have serious performance implications. This is because navigating between pages will require scripts, assets, etc., to be reloaded. Even if these assets are cached, there will still be performance issues.

Examples of SPA libraries you can use in your Cordova applications are:

And many, many, more.

2) Performance Considerations

One of the biggest mistakes a new Cordova developer can make is to assume that the performance they get on a desktop machine is the same they will get on a mobile device. While our mobile devices have gotten more powerful every year, they still lack the power and performance of a desktop. Mobile devices typically have much less RAM and a GPU that is a far cry from their desktop (or even laptop) brethren. A full list of tips here would be too much, but here are a few things to keep in mind (with a list of longer resources at the end for further research).

Click versus Touch - The biggest and simplest mistake you can make is to use click events. While these "work" just fine on mobile, most devices impose a 300ms delay on them in order to distinguish between a touch and a touch "hold" event. Using touchstart, or touchend, will result in a dramatic improvement - 300ms doesn't sound like much, but it can result in jerky UI updates and behavior. You should also consider the fact that “touch” events are not supported on non-webkit browsers, see CanIUse. In order to deal with these limitations, you can checkout various libraries like HandJS and Fastouch.

CSS Transitions versus DOM Manipulation - Using hardware accelerated CSS transitions will be dramatically better than using JavaScript to create animations. See the list of resources at the end of this section for examples.

Networks Suck - Ok, networks don't always suck, but the latency of mobile networks, even good mobile networks, is far worse than you probably think. A desktop app that slurps down 500 rows of JSON data, every 30 seconds, will be both slower on a mobile device as well as a battery hog. Keep in mind that Cordova apps have multiple ways to persist data in the app (LocalStorage and the file system for example). Cache that data locally and be cognizant of the amount of data you are sending back and forth. This is an especially important consideration when your application is connected over a cellular network.

Additional Performance Articles and Resources

3) Recognize and Handle Offline Status

See the previous tip about networks. Not only can you be on a slow network, it is entirely possible for your application to be completely offline. Your application should handle this in an intelligent manner. If your application does not, people will think your application is broken. Given how easy it is to handle (Cordova supports listening for both an offline and online event), there is absolutely no reason for your application to not respond well when run offline. Be sure to test (see the Testing section below) your application and be sure to test how your application handles when you start in one state and then switch to another.

Note that the online and offline events, as well as the Network Connection API is not perfect. You may need to rely on using an XHR request to see if the device is truly offline or online. At the end of the day, be sure add some form of support for network issues - in fact, the Apple store (and probably other stores) will reject apps that don’t properly handle offline/online states. For more discussion on this topic, see "Is This Thing On?"


本文转载自:

共有 人打赏支持
煮酒科技
粉丝 3
博文 10
码字总数 3333
作品 0
海淀
部门经理
私信 提问
加载中

评论(2)

煮酒科技
煮酒科技

引用来自“yjf”的评论

刚接触cordova,不清楚他能不能实现多线程,有相关的教材吗0
cordova多线程可以通过插件实现,单纯的js解析和执行还是单线程的。
y
yjf
刚接触cordova,不清楚他能不能实现多线程,有相关的教材吗0
Velocity China 2015

关于 Velocity China 大多数具有对外动态网站的公司都面临同样的挑战:网页必须快速装载,基础结构必须有效地扩展,网站和服务必须可靠,而完成这一切还要在团队能承受的范围之内,还不能超出...

文洁洁洁
2015/06/05
615
2
Velocity China 2016Web性能与运维大会,评论抢免费票!

Velocity会议是美国著名公司O'Reilly Media的一个会议品牌,在美国已经召开了9年,每年会有四次会议,分别是在美国的纽约和加州,荷兰和中国,在中国到今年为止已经是第七届了,是很有内容的...

Alaise
2016/11/09
464
7
Google调整搜索引擎算法:HTTPS网站排名更高

Google在自己的官方博客发布公告,已经调整其搜索引擎算法,采用HTTPS加密的网站在搜索结果中的排名将会更高。 Google称在过去数月已经对目标网站是否采用安全层进行过测试。其目标非常简单,...

oschina
2014/08/08
3.3K
21
APMCon 2017中国应用性能管理大会

APMCon 2017大会将于8月10日北京召开,会议火爆! 抢票地址:https://www.huodongjia.com/event-1817641024.html (猛戳链接,快人一步!) 驱动应用架构优化与创新 APMCon是由听云、极客邦科...

活动家
2017/07/13
1
0
Symfony 2.0 发布,PHP框架

经过12个预览发行、5个beta版以及6个RC版,Symfony 终于迎来了2.0版本。2.0版本提升了性能、继续简化开发过程以及更加安全,详情请看官方发行说明。 简单的模板功能symfony是一个开源的PHP W...

红薯
2011/07/30
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 姑娘馋的口水都留下来了。

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @且无需多言 :分享Fall Out Boy的单曲《Disloyal Order Of Water Buffaloes》 《Disloyal Order Of Water Buffaloes》- Fall Out Boy 手机党...

小小编辑
今天
125
7
vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
2
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
9
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部