文档章节

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

北京阿朱
 北京阿朱
发布于 2015/03/05 15:53
字数 883
阅读 74
收藏 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
博文 8
码字总数 1422
作品 0
海淀
部门经理
加载中

评论(2)

北京阿朱
北京阿朱

引用来自“yjf”的评论

刚接触cordova,不清楚他能不能实现多线程,有相关的教材吗0
cordova多线程可以通过插件实现,单纯的js解析和执行还是单线程的。
y
yjf
刚接触cordova,不清楚他能不能实现多线程,有相关的教材吗0
Radware最新电商页面与Web性能调查报告

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

it168网站
2013/10/31
0
0
何崚谈阿里巴巴前端性能优化最佳实践

转载:http://www.infoq.com/cn/interviews/hl-alibaba-front-end-performance-optimization 大家好,我现在在阿里巴巴园区采访阿里巴巴中文站架构师,兼B2B网站优化领域的负责人何崚。何崚你...

晨曦之光
2012/03/09
198
0
O'Reilly Velocity China 2014 技术大会火热报名中

O'Reilly Velocity China 2014技术大会火热报名中,让我们一起构建更快速、更健壮的Web Velocity 聚集了这样一些人和技术——恰恰是他们保证了 Web 系统的快速、可扩展、富于伸缩性以及高可用...

oschina
2014/07/14
1K
6
何崚谈阿里巴巴前端性能优化最佳实践

大家好,我现在在阿里巴巴园区采访阿里巴巴中文站架构师,兼B2B网站优化领域的负责人何崚。何崚你好,请简单介绍一下你自己。 我叫何崚,2006年加入阿里巴巴。之前一直在中科院下属的两个基因...

zjf_sdnu
2011/10/14
0
0
Google调整搜索引擎算法:HTTPS网站排名更高

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

oschina
2014/08/08
3.3K
21

没有更多内容

加载失败,请刷新页面

加载更多

记录一次idea断点打不上的解决办法和猜测原因

写完代码,需要在本地调试一下,却发现断点打不上,正常打上断点应该是红点加勾,如下图: 但是今天打断点却出现圈+斜杠,类似下面这种: 出现这种情况大概有两种可能,一种是断点打在了错误...

edwardGe
16分钟前
0
0
使用PHP辅助快速制作一套自己的手写字体实践

一、背景 笔者以前在网上看到有民间高手制作字体的相关事迹,觉得把自己的手写字用键盘敲出来是一件很有意思的事情,所以一直有时间想制作一套自己的手写体,前几天在网上搜索了一下制作字体...

Mr_zebra
18分钟前
0
0
Python 中实现装饰器 @functools.wraps 的作用

废话不说,先看两端代码: 1、使用了@functools.wraps import timeimport functoolsdef timeit(func): @functools.wraps(func) def wrapper(): start = time.clock()...

fang_faye
21分钟前
0
0
spark任务出现Lost executor报错的几点解决方案

1、spark.executor.extraJavaOptions="-XX:MaxPermSize=2028m" 2、spark.akka.frameSize=1003、增加executor内存executor默认的永久代内存是64K,可以看到永久代使用率长时间为99%,通过...

KYO4321
28分钟前
0
0
全文检索Solr集成HanLP中文分词

以前发布过HanLP的Lucene插件,后来很多人跟我说其实Solr更流行(反正我是觉得既然Solr是Lucene的子项目,那么稍微改改配置就能支持Solr),于是就抽空做了个Solr插件出来,开源在Github上,...

左手的倒影
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部