performance - HTML5 Phonegap アプリの微調整

Question

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。

編集：

気づいたことの1つは、アプリケーションのキャッシュサイズが移行ごとに増加していることですclick（pageMB単位で到達する時間）.. ajaxキャッシュを無効にしましたが..何か他のことをする必要がありますか？

score 4 · Accepted Answer

次の方法でアプリの速度を上げることができます
。 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 の多くを使用しないようにします。シャドウとグラデーションを制限する link 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 トランジション + ハードウェアアクセラレーションを使用します。ネイティブスクロール
を使用します。
6. FastClick FastClick は、モバイルブラウザでの物理的なタップとクリックイベントの発火の間の 300 ミリ秒の遅延をなくすためのシンプルで使いやすいライブラリです。(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;
});

Cache Static Data LocalStorage、Database & File の使用 が遅い

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

score 3 · Accepted Answer

Android でのパフォーマンスを向上させたい場合は、CSS の一部を無効にする必要があります。

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

score 1 · Accepted Answer

プリフェッチと呼ばれるメカニズムがあり、クリックする前にページをロードします。そのため、リダイレクトが高速になります。しかし、あなたはより多くの転送を使用しています。

次のように使用されます。

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

このサイトを確認してください: http://jquerymobile.com/test/docs/pages/page-cache.html

performance - HTML5 Phonegap アプリの微調整

4 に答える 4

Related

Reference