gpt4 book ai didi

performance - 微调 HTML5 Phonegap 应用程序

转载 作者:太空宇宙 更新时间:2023-11-04 14:05:34 28 4
gpt4 key购买 nike

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

  • jquery.mobile-1.1.1.min.js
  • jquery.mobile-1.1.1.min
  • lawnchair.js

一切正常用 Phonegap cordova-2.0.0 包裹它

但是注意到应用程序非常慢。

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

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

还有什么工具可以测试吗?

目标平台:AndroidiOS

编辑:

注意到的一件事是应用程序的缓存大小在每次单击页面 转换时都在增加(达到 MB 的时间).. 尽管禁用了 ajax 缓存。 .我需要处理其他事情吗?

最佳答案

您可以通过以下方式提高应用程序的速度:
1. 使用您在项目中包含的 js 的精简版本。
2. 避免使用尺寸较大的图片。使用网络兼容的 PNG 文件调整它们优化图像使用 CSS Sprite 表 enter image description here

   .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)上托管图像避免图像的 404s

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


3. 避免使用过多的 CSS。限制阴影和渐变链接 box-shadow,border-radius,gradients,text-align尝试禁用一些会降低速度的 CSS(Simon MacDonald 的想法)。在您的 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 Transitions + 硬件加速 使用原生滚动
5.如果您使用任何 Live url 来更好地获取 JS,请下载它们并在本地使用。
6. FastClick FastClick 是一个简单易用的库,用于消除移动浏览器上物理点击和点击事件触发之间的 300 毫秒延迟。(jjsquared 的想法)

7.使用Slpash屏幕。
8. 仅在必要时避免使用框架。尝试进行响应式设计。
9. 不要在服务器上生成用户界面。在客户端用JavaScript创建用户界面
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;
});

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

$.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
});

关于performance - 微调 HTML5 Phonegap 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12278685/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com