イオン2スクロールのパフォーマンスの問題

Question

ionic2とAngular2に関するブログやレビューにかなり感銘を受けました。イオン2でアプリケーションを書き始めました.ios2とスクロールの両方で、ionic2スクロールのパフォーマンスが大量のレコードには適していません。

1. 私はそれがアイテム
2. を30+に来るとき、スクロールのパフォーマンスが10〜20項目のために良いが、その非常に遅いのリスト項目
3. のほとんどでは、画像間のあるアイテムの大きなリストを持っています多くの検索結果が見つかった後、イオンスクロールバーチャルスクロールが使用され、パフォーマンスはわずか50項目まで改善されましたが、65+項目後には少し遅くなりました

iOSでWKWebviewを試してみましたが、大きなリストのために黒にするので、私はこの考えを落とします。 アプリケーションのサイズが大きくなるため、クロスウォークを使用したくないので、試したことはありません。

この問題や純粋なjavascriptフレームワークソリューションを修正するための回避策を提案すると、問題のない大きなリストを表示できますか？ AndroidとiOSの両方で

Answer 1

スクロールは、モバイルアプリケーションとの最も一般的なやりとりの1つであり、正しく感じることは非常に重要です。ネイティブアプリケーションはスムーズにスクロールしたり、方向や向きの変化に反応したり、自然な感じで加速したり減速したりするリストを持っています。

は、仮想スクロールがこの問題に対処し

Ionic2

の仮想スクロールを使用してみてください。 Ionic 1ではこれはCollection Repeatと呼ばれ、Ionic 2ではVirtual Scrollと呼ばれていますが、HTML5モバイル開発で広く使用されているコンセプトです。基本的な考え方は、現在画面に表示されているリストデータを表示するにはDOM内に十分な要素を作成し、DOM要素をリサイクルして画面外にスクロールするときに新しいデータを表示するということです。

詳細：Ionic Framework - Virtual Scroll

Answer 2

スクロールのパフォーマンスは、ほとんどのJavaScriptフレームワークで共通の問題です。

これは、タッチとホイールのイベントが原因です。しかし、{passive：true}をイベントリスナーに渡して、いくつかの最適化を有効にすることができます。これを前にすることで、ハンドラは、スクロールを無効にするためにpreventDefault（）を決して使用しないと言います。

addEventListener(document, "touchstart", function(e) { 

},{passive: true}); 

すべてのブラウザではまだ実装されていませんが、うまくいけば、すべての主要なjsフレームワークでこの手法が採用されます。