文档章节

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

北京阿朱
 北京阿朱
发布于 2015/03/05 15:53
字数 883
阅读 73
收藏 0
点赞 0
评论 2

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
2014Oracle技术嘉年华

作为国内最顶尖的Oracle数据库技术盛会,我们今年荣幸的邀请到Oracle公司副总裁Thomas Kyte,Pythian集团 CTO Alex Gorbachev等Oracle数据库领域国际级专家,特别为中国的数据库爱好者带来他...

harries
2014/10/22
0
0
数据库案例集锦 - 开发者的《如来神掌》

标签 PostgreSQL , PG DBA cookbook , PG Oracle兼容性 , PG 架构师 cookbook , PG 开发者 cookbook , PG 应用案例 背景 「剑魔独孤求败,纵横江湖三十馀载,杀尽仇寇,败尽英雄,天下更无抗...

德哥
2017/06/09
0
0
何崚谈阿里巴巴前端性能优化最佳实践

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

晨曦之光
2012/03/09
198
0
Radware最新电商页面与Web性能调查报告

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

it168网站
2013/10/31
0
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
ELSE 技术周刊(2017.12.11期)

业界动态 Angular 5.1 & More Now Available Angular发布5.1版本,同时发布了Angular CLI 1.6版本以及首个稳定版本的Angular Material。CLI支持了Service Worker,以及带来对AppShell更好的支...

风清洋ELSE
2017/12/16
0
0
300+篇运维、数据库等实战资料免费下载(文章+PDF+视频,持续更新)

乔川 2017-07-18 07:33:24 浏览60259 评论14 发表于: 云栖社区官方团队 >> 社区精选文章集 大数据 阿里云 函数 加密 云栖大会 阿里巴巴 SaaS 数据中心 摘要: 2017年已过去一半,在此小编为...

姬子玉
2017/11/28
0
0
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0
五大顶级CSS性能优化工具,值得一试!

  【IT168 评论】为什么Web页面的加载速度如此重要?在这个信息化的时代,如果一个网站的加载时间过长,大部分用户会极其不耐烦地选择“关掉”!这让辛辛苦苦熬夜敲代码的程序员们情何以堪,...

it168网站
2017/03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

面试宝典-什么是缓存穿透?

缓存穿透是说收到了一个请求,但是该请求缓存里没有,只能去数据库里查询,然后放进缓存。 这里面有两个风险,一个是同时有好多请求访问同一个数据,然后业务系统把这些请求全发到了数据库;...

suyain
12分钟前
0
0
vue基础知识练习2

一、发送AJAX请求 <div id="demo1"><button @click="send">发送AJAX请求</button><button @click="sendGet">GET方式发送AJAX请求</button><button @click="sendPost">POST方式发送A......

一个yuanbeth
14分钟前
0
0
Xamarin Essentials教程磁力计Magnetometer

Xamarin Essentials教程磁力计Magnetometer 磁力计也叫地磁、磁感器,可用于测试磁场强度和方向。在手持设备中,通过磁力计可以计算设备的左右、前后倾斜角度,广泛应用于手机各种的应用中。...

大学霸
18分钟前
0
0
mesos:Authentication timed out

最近当slave开始慢慢部署异地集群的时候又碰上了这个问题 I0717 10:27:11.695762 28852 slave.cpp:895] New master detected at master@192.168.2.161:5050I0717 10:27:11.695811 28852 sl......

xueyi28
25分钟前
0
0
赋予用户库的读写权限

1、创建用户 CREATE USER 'test'@'%' IDENTIFIED BY '15ht46389012t'; #'%' - 所有情况都能访问;‘localhost’ - 本机才能访问;’192.168.1.2‘ - 指定 ip 才能访问 2、赋予权限 grant al...

xixingzhe
26分钟前
0
0
Spring核心——JSR250与资源控制

JSR-175与元编程 要说明JSR-250先要解释清楚JSR-175,要解释清楚JSR就的先了解JCP是什么。网上资料很多,就不细说了,简单的说JCP(Java Community Process)是管理Java生态(包括J2SE、J2E...

随风溜达的向日葵
27分钟前
3
0
Java面试基础篇——第五篇:类的实例化顺序

类的实例化顺序:包括 1.父类静态数据,构造函数,字段;2.子类静态数据,构造函数,字段等, 当我们new一个对象的时候,类实例化的顺序是怎么样的呢? OK.还是上代码比较实在(我就是个实在...

developlee的潇洒人生
27分钟前
0
0
引入mui.css出现闪屏问题

自己写的选项卡切换功能,引入了mui.css样式,当我切换选项卡时,页面会出现闪动,当我把mui.css注释掉后页面就不会出现闪动问题,由于mui.css文件太大,我也不知道什么属性引起的闪屏,所以...

爱喝水的小熊
31分钟前
1
0
大家都在学的编程语言 Python,可以用来干什么?

编者按:Python因为简单全面易用而成为近年来大热的编程语言。但是很多人学习了这门余元的语法和基本功能之后却不知道Python能干什么以及怎么做。Realpython.com上面的一篇文章于是把Python可...

Python燕大侠
46分钟前
2
0
学习大数据必备的5大核心技术,你知道几个?需要掌握哪些知识?

大数据已经成为时代发展的趋势,很多人纷纷选择学习大数据,想要进入大数据行业。大数据技术体系庞大,包括的知识较多,系统的学习大数据可以让你全面掌握大数据技能。学习大数据需要掌握哪些...

董黎明
57分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部