12

私は主にJS（Mootools）とHTMLでアプリを作成webviewし、アプリにロードしました。

nodisplayこれは、クラスを追加または削除することによってページの一部（要素）を表示または非表示にする1つのhtmlファイルです。

.nodisplay {display:none}
function showPage1()
{
     $$('.pages').addClass('nodisplay');
     $('page1').removeClass('nodisplay');
}

android 4（xperiaarcとgalaxynote 2）では、奇妙な遅いレンダリングが表示されますが、古いバージョンがどのように動作するかわかりません。要素を非表示にして別の要素を表示すると、最初は正しいように見えますが、スクロール中に古い要素の一部が数ミリ秒間表示され、すぐに消えます。これは、非表示領域のレンダリングが描画モーメントに延期されているようなものです。

また、非表示と表示中に奇妙な点滅をすることもあります。

PCのクロームでは問題ありません。AVDでも、瞬きすることなく非常にシャープに動作します。

それがアンドロイドの問題なのか、それを克服する方法があるのか​​わかりません！

試しandroid:hardwareAccelerated="false"|"true"ましたが、効果はありません。また、ws.enableSmoothTransition()これも問題を解決しません。

4

5 に答える 5

10

これが私の「1つのスタックの答えであなたのwebviewアプリを修正する（初版）」です：

パフォーマンス

パフォーマンスを向上させるために、JSでページ要素への参照を保持します。$('.page1')ページを変更するたびにDOMを解析する必要があり、これは1回だけ実行する必要があります。これも当てはまり$('.pages')ます。複数の要素をスキャンして操作を実行する必要があります。代わりに、アクティブなページ参照を保持することをお勧めします。多分それはこのように見えるはずです：

function showPage(page) { // receive active page; page is the jQuery ref to the next page
    activePage.addClass('nodisplay'); // activePage is the jQuery ref to the previous page
    page.removeClass('nodisplay'); // show the page
}

アプリ全体をスキャンして、この種の問題を修正する必要があります。大したことではないように思われるかもしれませんが、リソースが限られているモバイルOSで違いを生むことができると確信しています。

DOM管理

まだ使用していない場合は、必ずテンプレートを使用する必要があります。テンプレートは、アプリの管理に役立つだけでなく、DOMを可能な限り軽量に保つのに役立ちます。100ページの要素を使用する代わりに、0から始めて、必要に応じてその場で作成できます。最大のパフォーマンスを実現するには、すべてのテンプレートを1回だけレンダリングするようにしてください。レンダリングする前に、ページがDOMにすでに存在するかどうかを確認してください。これがアプリにどのように影響するかを確認するには、「ブラウザリフロー」をグーグルで検索してください。

この仕事のためのツールはたくさんあります。現在の設定を考慮すると、http： //mootools.net/forge/p/templateを選択できます。その他のオプションは次のとおりです：http： //mustache.github.com/、http：//underscorejs.org/#template、http：//api.jquery.com/category/plugins/templates/。

UI

また、非常に重要ですが、非常に広大です。覚えておくべきいくつかのこと：

  • 軽量でセマンティックで有効なマークアップ
  • jsはデータと状態のみを管理する必要があります。アニメーションとDOMの更新により、速度が低下します。css3フレンドリーな環境を利用する
  • 画像を最適化し、ビジュアルとしてのみ使用してみてください。これを避けられない場合は、スプライトを使用することをお勧めします。

デバッグ

痛みを伴う可能性があります。weinreは非常に便利だと思いました：http：//people.apache.org/~pmuellr/weinre/docs/latest/。try ... catchブロックルール！logcatの出力に役立つもの：http：//jsharkey.org/blog/2009/04/22/modifying-the-android-logcat-stream-for-full-color-debugging/。

結論として、Webビューは依然として過酷な環境であり、最近では実行可能なオプションになっていますが、「正しくする」ためには多くの検討と計画が必要です。

お役に立てれば。

于 2012-12-23T11:52:36.167 に答える
4

Webkitを使用したHTMLについてはよくわかりません。しかし、私のプロジェクトの1つは、スクロール効果の非表示と表示のラグで同じスクロールの問題を抱えていました。Webビューのハードウェアアクセラレーションを有効にしました。

おそらくこれを試してみるべきです。

于 2012-12-26T05:14:16.290 に答える
1

.nodisplay {height:0; display:none; }

ここで働いた...

于 2012-12-19T11:11:05.963 に答える
0

WebViewAjayの回答は、背景を透明にするために、別のプロジェクトで使用したもののヒントを与えてくれました。今まで、コードがハードウェアアクセラレーションをオフにすることを知りませんでした。私はこのプロジェクトでそのコードの平和性をテストしましたが、もう遅いレンダリングはありません。ページのスクロールは以前ほどスムーズではありませんが、レイトレンダリングよりは優れています。

これは、これらすべてを修正するためのコードです。

if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

ちなみに、定義android:hardwareAccelerated="false"は影響しないようなものwebviewです！

于 2012-12-26T10:59:21.900 に答える
0

このコードも試してみてください、それは私を大いに助けました.. -webkit-transform: translateZ(0); あなたはそれが私を助けた私のコードを見ることができます.. セレクターに基づいたjqueryトグル（表示/非表示）

以下のリンクもご覧ください。 http://www.html5rocks.com/en/mobile/optimization-and-performance/

于 2013-04-09T09:06:57.077 に答える