ドロップダウンリスト付きのモーダルダイアログは、却下後すぐにフェードアウトしません
orif
私はAngularアプリを持っていて、それをUIBootstrapプロジェクトと統合しました。私は通常を使用しています
750レコードを含むドロップダウンのあるモーダルダイアログでは、アイテムの1つを選択して[OK]または[キャンセル]をクリックすると、モーダルとオーバーレイが遅滞なくフェードアウトします。
Here's the plunker:750レコードのモーダルダイアログ
ドロップダウンのあるモーダルダイアログに約1万件以上のレコードが含まれていて、リストからアイテムの1つが選択されている場合。[OK]または[キャンセル]をクリックしても、モーダルダイアログがすぐに非表示になるわけではありません。代わりに、Chromeで8〜10秒の遅延が発生し、IEではまだテストしていません。
Here's the plunker:10k以上のレコードを含むモーダルダイアログ
質問：より多くのデータでパフォーマンスが低下するのはなぜですか？
シボレー
DOMの首をつかみ、10,000<option>ノードを喉に注ぐことで、ブラウザー全体の速度を低下させています。どういうわけかデータを遅延ロードする必要があります。Twitter、Facebookなどのサイトで、ページの一番下までスクロールすると、サーバーからより多くのレコードが読み込まれることに気付いたことがありますか？優れたアプリは、スクロールアップされた古いレコードもガベージコレクションし始めます。
Facebookのニュースフィードをスクロールすると、2007年以降のすべての友達の投稿が同時にブラウザに読み込まれるわけではありません。DOMに最大数の投稿が存在すると、Facebookは上にスクロールした最も古い投稿の削除を開始して、より多くのスペースを確保し、サーバーから新しい投稿を取得して、スクロールを続行できるようにします。DOMに投稿が追加されているため、下にスクロールするとブラウザのスクロールバーが上にジャンプすることもあります。
これほど多くのデータを処理できるブラウザはありません。ブラウザはデータベースではありません。10kレコードのあなたのプランカーがそれと同じくらいパフォーマンスが良いことに驚いています！ハハ。ドロップダウンは、そのデータを表示したいものではありません。座って、そのデータをユーザーに表示するためのより良い方法を考える必要があります。私の最初の考えは、最初に上位25の最も選択されたオプションなどを含むフィルター可能なリストを提供することです。次に、検索フィールドに入力すると、検索条件に一致する新しいリストがサーバーから読み込まれます。ユーザーが実際に何を望んでいるかを知っているのはあなただけですが、それは10k以上のオプションを備えたドロップダウンリストではないことを保証します。
例：
ブラウザのスクロールバーが一番下に来ると、少し上にジャンプすることに注目してください。Twitterが一番下に移動し、さらにデータを読み込んでスクロールします。十分にスクロールすると、最終的にはページ上部のデータのクリーンアップも開始されます。
最新のブラウザは多くのことを処理できますが、10,000以上の<option>ノードがそれをやり過ぎています。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
PHP-ブートストラップモーダルダイアログ、日付の選択、CSVのダウンロード-ブラウザにファイルを保存させることができません
- 2
私のアプリはグーグルプレイストアからダウンロードするときに許可を求めません。マニフェストファイルで場所の許可を指定しました
- 3
選択タグのデフォルトアイコンを置き換えてドロップダウンアイコンをクリックしても、ドロップダウンリストにデータが入力されません
- 4
すぐにインストールせずに11.04から11.10へのアップグレードをダウンロードできますか？
- 5
ブートストラップ4-タブ付きのモーダルダイアログ-ドロップダウンメニュー
- 6
Webアプリをモバイルサファリで表示したときに、iTunesでアプリストアをダウンロードするためのデフォルトのポップアップはありますか？
- 7
Ubuntu13.10-ソフトウェアをテストするためにeth0またはwan0インターフェースのアップロード/ダウンロードをスローモーションにします
- 8
トップレベルウィンドウ、子ウィンドウ、ダイアログ（モーダル）ウィンドウ、および非ダイアログ（モードレス）ウィンドウの違いは何ですか？
- 9
UbuntuWubiのインストールがフリーズ/ストール/ ISOダウンロードにハングアップしています
- 10
ブートストラップモーダルはトグル、バックグラウンドスクロールでアクティブな要素にはなりませんが、モーダルはスクロールしません
- 11
サインアップモーダルウィンドウを表示し、すぐにモーダルにログインします
- 12
今すぐアップデートをダウンロードするようにWindows7を設定することはできますが、次のシャットダウン時にインストールしますか？
- 13
ダウンロードマネージャーでダウンロード後にapkをインストールし、アプリを終了します
- 14
[ファイルのダウンロード]ダイアログボックスを使用せずに、WebBrowserコントロールを使用してファイルをダウンロードするにはどうすればよいですか？
- 15
ネットワークがアップした後にサービスを開始しているときに、「クライアントクリティカルインターフェイスeth0 / 2がダウンしているか、リンクローカルアドレスがありません」
- 16
ネットワークがアップした後にサービスを開始しているときに、「クライアントクリティカルインターフェイスeth0 / 2がダウンしているか、リンクローカルアドレスがありません」
- 17
モーダルダイアログを閉じた後、メインウィンドウはイベントを受信しません
- 18
Dart Pirateチュートリアルはビルド後にJSONをダウンロードしません（ステップ7）
- 19
ブーストラップモーダルダイアログウィンドウにリダイレクトする方法をLaravel
- 20
ダウンロードした更新プログラムのインストール中に、更新マネージャーがスタックしました（ただしフリーズしませんでした）。私は何をすべきか？
- 21
ダウンロードした更新プログラムのインストール中に、更新マネージャーがスタックしました（ただしフリーズしませんでした）。私は何をすべきか？
- 22
ダイアログボックスのないデフォルトのダウンロードフォルダではなく、特定の場所にファイルをダウンロードします
- 23
Ubuntu 16.04：ソフトウェアとアップデートをダウンロードできません
- 24
Passport.authenticateとログアウトのメソッドとフラッシュは、リダイレクト後に新しいページにルーティングするまで機能しません
- 25
スクロールに応じて、2番目のヘッダーがフェードインまたはフェードアウトします
- 26
ファイルのダウンロード後にブートストラップモーダルポップアップを閉じる方法
- 27
EXTJSのモーダルウィンドウでボタンがクリックされたときに、メインウィンドウでストアをリロード/グリッドを更新します
- 28
AngularアプリケーションのPrimeNGp-dialogモーダルは、背景とダイアログウィンドウ自体をブロックします
- 29
OSがインストールされたフォントは、ストーリーボードのドロップダウンでは使用できません
コメントを追加