2

已成功构建 HTML5 应用程序。以下库已用于此:

  • jquery.mobile-1.1.1.min.js
  • jquery.mobile-1.1.1.min
  • 草坪椅.js

一切都很好用Phonegap cordova-2.0.0包裹它

但是已经注意到应用程序很慢。

我的应用程序实际上执行ajax请求获取Json并加载 UI(主要是listviews

是否有任何性能改进技术可以使我的应用程序运行得更快?

还有任何工具可以测试相同吗?

目标平台:AndroidiOS

编辑

注意到的一件事是应用程序的缓存大小在每次转换时都在增加clickpage它达到 MB 的时间).. 虽然禁用了 ajax 缓存.. 我需要处理其他事情吗?

4

4 回答 4

4

您可以通过以下方式提高应用程序的速度:
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;
    }

使用正确的图像大小(不要在 HTML 中缩放图像) 在可扩展的分布式系统(即 S3)上托管图像 避免图像的 404

<img src="{{pic}}" onerror='this.src="nopic.jpg"'/>


3.避免使用过多的 CSS。Limit Shadows and Gradients 链接 box-shadow、border-radius、gradients、text-align 尝试禁用一些减慢它的 CSS(Simon MacDonald 的想法)。在您的 jquery mobile .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 url 来获取 JS,最好下载它们并在本地使用。
6. FastClick FastClick 是一个简单易用的库,用于消除移动浏览器上物理点击和点击事件触发之间的 300ms 延迟。(jjsquared 的想法)

7.使用 Slpash 屏幕。
8.避免仅在必要时使用框架。尝试做出响应式设计。
9.不要在服务器上生成 UI。在客户端用 JavaScript 创建 UI
10.最小化回流

  • 减少 DOM 元素的数量。
  • 在重新插入 DOM 之前,尽量减少对 DOM Update 元素的“离线”访问。
  • 避免在 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;
});

使用缓存静态数据本地存储,数据库和文件

$.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
});
于 2014-05-29T08:02:19.047 回答
3

如果你想让它在 Android 上更高效,你应该禁用一些 CSS:

https://stackoverflow.com/a/12081339/41679

于 2012-09-05T14:38:21.870 回答
1

有一种称为预取的机制​​,它会在您单击页面之前加载页面。所以重定向更快。但是您正在使用更多传输。

它是这样使用的:

<a href="prefetchThisPage.html" data-prefetch> ... </a>

检查这个网站:http: //jquerymobile.com/test/docs/pages/page-cache.html

于 2012-09-05T10:53:21.963 回答
0

为了提高点击性能并避免移动浏览器原生内置的 300 毫秒浏览器延迟,您应该使用诸如 FastClick 之类的库。这将大大减少 mobile.changePage 调用之间的延迟。

https://github.com/ftlabs/fastclick

于 2013-06-26T16:36:29.113 回答