微調HTML5 Phonegap應用程序

已成功構建HTML5應用程序。以下庫已經使用了的是：微調HTML5 Phonegap應用程序

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緩存..我是否需要照顧一些其他的事情？

來源

2012-09-05 Suave Nti

對於其移動平臺已經創建的科爾多瓦建設？因爲性能還取決於瀏覽器渲染速度。與大多數Android瀏覽器相比，Safari的渲染速度稍快。 –

@AzizShaikh：主要針對Android> 2.2和iOS。是否有任何關於緩存的事情？正如我可以看到每個Ajax調用後緩存增加？ –

@Aziz Shaikh：「輕微」是輕描淡寫。在Chrome for Android之前，我們可能會談論關於Html5 Canvas的1/10性能比。 – psousa

有一種稱爲預取的機制，它在你點擊它之前加載頁面。所以重定向速度更快。但是你正在使用更多的轉移。

它這樣使用：

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

檢查這個網站： http://jquerymobile.com/test/docs/pages/page-cache.html

來源

2012-09-05 10:53:21

感謝您的提示...我basicallly動態加載列表視圖，甚至是頁面和內容加載使用mobile.changePage ..做'data-prefetch'幫助我的情況？ –

如果你想讓它更好的性能在Android上，你應該禁用一些CSS的：

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

來源

2012-09-05 14:38:21

+1感謝您的提示..它已經真正提高了性能，但有一點已經注意到應用程序的「緩存」大小在每次點擊和頁面轉換時增加（達到MB的時間）..儘管禁用了ajax緩存..我需要照顧一些其他的事情嗎？ –

對不起，我儘量避免使用JQM。 –

謝謝，請您列出除JQM以外的替代方案..我的應用程序很簡單，沒有太多的動畫..只是爲了處理在線數據的商業目的。 –

爲了提高點擊性能並避免300毫秒的瀏覽器延遲本地編譯t到移動瀏覽器中，您應該使用FastClick等庫。這將大大減少mobile.changePage調用之間的滯後。

https://github.com/ftlabs/fastclick

來源

2013-06-26 16:36:29 jjsquared

您可以增加應用程序的速度：
使用在你的項目，你已經包括JS的精縮版。
2.避免使用更大尺寸的圖像。調它們與網絡兼容的PNG文件優化圖像使用CSS雪碧表 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）避免使用太多CSS.Limit陰影和漸變的圖像

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

避免404鏈接框陰影，邊界半徑，漸變，文本對齊嘗試禁用一些CSS減慢它（西蒙麥克唐納的想法）。在您的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.如果您正在使用的任何實際網址獲得JS更好地下載它們並在本地使用。
6.FastClick FastClick是一個簡單，易於使用的圖書館，對於消除身體自來水和移動瀏覽器點擊在觸發事件之間的300ms的延遲。（jjsquared的想法）

7.使用Slpash屏幕。
8.避免僅在必要時使用框架使用。嘗試做出快速響應的設計。
9.在客戶機側不生成UI上server.Create在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。避免網絡訪問不要讓網絡dependend應用程序用於獲取內容

$.ajax({url: "services/states"}).done(function(data) { 
    states = data; 
});

使用緩存靜態數據本地存儲，數據庫&文件慢

$.ajax({url: "slow/feed"}).done(function(data) { 

});

快速

dataAdapter.getItems().done(function(data) { 

});

不要等待數據顯示UI

// Display view 
displayView(); 

// Get data 
$.ajax({url: "product/101"}).done(function(product) { 
    // Update view 
});

來源

2014-05-29 08:02:19

微調HTML5 Phonegap應用程序

回答

相關問題