文档章节

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

煮酒科技
 煮酒科技
发布于 2015/03/05 15:53
字数 883
阅读 76
收藏 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
Symfony 2.0 发布,PHP框架

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

红薯
2011/07/30
1K
3
Radware最新电商页面与Web性能调查报告

【IT168 资讯】日前,全球领先的虚拟数据中心与云数据中心应用交付和应用安全解决方案提供商Radware公司发布了一份题为“行业现状:2013年秋季电商页面速度与Web性能”的最新调查报告。这是R...

it168网站
2013/10/31
0
0
移动开发者们,是时候使用HTML5了!

Html5喊了好多年了,至今仍没有被大规模的使用。依然记得2012年参加HTML5梦工厂(现在叫iWeb峰会)去了好多人,当时天真的以为,Html5真的开始流行起来了,于是就在会场卖书的地方买了本Htm...

OneAPM蓝海讯通
2015/07/10
252
2
Web 开发与设计之 Google 兵器谱

Google 的使命是 Web,在 Google 眼中,未来的一切应用都将 Web 化,一直以来,Google 为 Web 开发与设计者推出了大量免费工具,让他们更好地创建,维护,改善他们的 Web 站点,这些工具包含...

红薯
2010/04/19
847
4
SugarCRM活动 Sales and Marketing Best Practices

SugarCRM活动 市场营销和销售的最佳实践 这一个小时免费的网络研讨会将讨论从销售和营销的角度,如何更好的使用SugarCRM 时间:2014年6月5日 10:00AM - 11:00AM . PST (北京时间22:00 - 23:00...

srforce
2014/05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java.util.Concurrent.Exchanger源码

类图 源码: package java.util.concurrent;import java.util.concurrent.atomic.AtomicInteger;import java.util.concurrent.atomic.AtomicReference;import java.util.concurrent......

狼王黄师傅
今天
5
0
Kubernetes里的secret最基本的用法

Secret解决了密码、token、密钥等敏感数据的配置问题,使用Secret可以避免把这些敏感数据以明文的形式暴露到镜像或者Pod Spec中。 Secret可以以Volume或者环境变量的方式使用。 使用如下命令...

JerryWang_SAP
昨天
4
0
2018-11-20学习笔记

1. python数据类型: 给变量赋值什么样的值,变量就是什么样的类型 给变量赋值整数,变量就是整数类型 给变量赋值字符串,变量就是字符串类型 123 和“123”一样吗? 在python中 单引号 与双...

laoba
昨天
3
0
使用 React 和 Vue 创建相同的应用,他们有什么差异?

在工作中应用 Vue 之后,我对它有了相当深刻的理解。 不过,俗话说「外国的月亮比较圆」,我好奇「外国的」 React 是怎么样的。 我阅读了 React 文档并观看了一些教程视频,虽然它们很棒,但...

阿K1225
昨天
4
0
2天闭门培训|以太坊智能合约从入门到实战(北京)

2天培训 16个课时 探寻技术原理,精通以太坊智能合约开发 以太坊智能合约是现在应用的最广泛的区块链应用开发方式,HiBlock区块链社区针对以太坊智能合约的学习特别推出2天闭门研修班,通过2...

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部