微调HTML5语音应用程序
已经成功构建了一个HTML5应用程序。以下库已用于这一目的：
- jquery.mobile-1.1.1.min.js
- jquery.mobile-1.1.1.min
- lawnchair.js
每样东西都能很好地用Phonegap cordova-2.0.0包装。
但是已经注意到应用程序非常慢。
我的应用程序实际上是ajax请求获取Json并加载UI (主要是列表视图)。
是否有任何提高性能的技术使我的应用程序工作得更快？
还有什么工具来测试同样的东西吗？
目标平台：Android和iOS。
编辑
有一件事已经注意到，应用程序的缓存大小在每一个click和page转换(它达到MB的时间)上都在增加。虽然已经禁用了ajax缓存..。我还需要处理其他的事情吗？
回答 4
Stack Overflow用户
发布于 2014-05-29 08:02:19
您可以通过以下方式提高应用程序的速度：
1.使用已包含在项目中的js的精简版本的。
2.避免使用较大尺寸的图像。使用与web兼容的PNG文件对它们进行优化，使用CSS雪碧页优化图像
.icon {
width: 14px; height: 14px;
background-image: url("glyphicons-halflings.png");
}
.icon-glass {
background-position: 0 0;
}
.icon-music {
background-position: -24px 0;
}
.icon-search {
background-position: -48px 0;
}在可伸缩的分布式系统(即S3)上使用正确的图像大小(不要缩放HTML中的图像)主机图像，避免对图像使用404
<img src="{{pic}}" onerror='this.src="nopic.jpg"'/>3.避免使用大量的CSS.Limit阴影和渐变链接框-阴影、边框半径、渐变、文本对齐-尝试禁用一些减慢其速度的CSS.Limit(Simon的想法)。在jquery移动.css文件中，将以下内容添加到底部：
* {
text-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius:0 !important;
-webkit-border-top-left-radius:0 !important;
-webkit-border-bottom-left-radius:0 !important;
-webkit-border-bottom-right-radius:0 !important;
-webkit-border-top-right-radius:0 !important;
}4.使用CSS转换+硬件加速使用本机滚动
5.如果您使用任何Live来获得JS，最好下载它们并在本地使用。
6. FastClick FastClick是一个简单易用的库，用于消除物理点击和移动浏览器上点击事件之间300‘s的延迟。
7.使用斜面屏幕。
8.避免只在必要时使用框架。尝试做出响应性的设计。
9.不在server.Create上生成UI --在客户端在JavaScript中生成UI
10.最小化刷新
- 减少DOM元素的数量。
- 在重新插入DOM之前，尽量减少对DOM更新元素的“脱机”访问。
- 避免在JavaScript中调整布局
慢
$("#header a.back").on("click", clickHandler);
$("#header a.back").css("color", "white");
$("#header a.back").css("text-decoration", "none");
$("#header a.back").attr("href", "#");快速
var $backButton = $("#header a.back");
$backButton.on("click", clickHandler);
$backButton.css("color", "white");
$backButton.css("text-decoration", "none");
$backButton.attr("href", "#");11.避免网络访问--不要为了获取内容而使网络依赖应用程序
$.ajax({url: "services/states"}).done(function(data) {
states = data;
});使用缓存静态数据LocalStorage、数据库和文件慢速
$.ajax({url: "slow/feed"}).done(function(data) {
});快速
dataAdapter.getItems().done(function(data) {
});12.不要等待数据显示UI
// Display view
displayView();
// Get data
$.ajax({url: "product/101"}).done(function(product) {
// Update view
});Stack Overflow用户
发布于 2012-09-05 14:38:21
如果你想让它在Android上表现得更好，你应该禁用一些CSS：
Stack Overflow用户
发布于 2012-09-05 10:53:21
有一种叫做预取的机制，它在点击页面之前加载它.所以重定向更快。但你用的是更多的转帐。
它是这样使用的：
<a href="prefetchThisPage.html" data-prefetch> ... </a>查看本网站：http://jquerymobile.com/test/docs/pages/page-cache.html
https://stackoverflow.com/questions/12278685
复制相似问题
腾讯云开发者
