Enterprise: ドロップダウンリストに+500オプションが含まれている場合、IE11では複数選択ドロップダウンコントロールのパフォーマンスが低下します

これに対する私たちのテストの結果は、私にはそれらの数値よりもはるかに優れているように見えます。
http://master-enterprise.demo.design.infor.com/components/dropdown/test-2000-items.html

おそらく、特にマルチセレクトに問題があります。 それらは同じコードを持っていますが、いくつかの異なるパスを持っています。

最後のテストコードであなたはそれを持っていましたか？ または多くのドロップダウン？

@tmcconechy 、私のテストでは、ページに5つの複数選択コントロールがあります。 これらのコントロールをドロップダウン（非複数選択）に変更すると、パフォーマンスが大幅に向上することに気付きます。 この問題は、複数選択コントロールに固有のようです。

この問題について議論しますが、実際のユースケースについて少し興味がありますか？ ユーザーはどのような複数選択を選択していますか？

@picitelliは話すのに最適な人です。
私の理解では、ドロップダウンが有効になるたびにリストを作成する必要があり、ユーザーの役割に応じて最大約2000個のアイテムが存在する可能性があります。 ドロップダウンをポイントでリロードする必要がありますが、Mongooseからプラグインと通信することはできません。
どのような種類の複数選択が行われているのかわからない。
一般的にDOMにアイテムを追加するパフォーマンスが低いIE11についてたくさん読んだので、以下にいくつかのリンクを含めます。
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4561410/
https://stackoverflow.com/questions/43003579/internet-explorer-11-very-slow-appending-elements-to-dom
https://stackoverflow.com/questions/24913564/appending-large-groups-of-elements-in-ie11-enormously-slow

確かにIEはDOMで遅いですが、ユーザーに500個のアイテムが表示され、どれを選択する必要があるかという実際のユースケースを考えていました。 意思決定/選択UIには、おそらく最大50の選択肢がより適切であるように思われます。

おそらくもっと速くすることができますが、ユースケースが別のコンポーネントによって提供される方がよいかどうか疑問に思います。

確かに別のコンポーネントで提供する方が良いでしょうが、クライアントはドロップダウンを使用するように求めます。 戻って言いたいかどうかにかかわらず、これは適切なコンポーネントではなく、IE11で問題が発生する可能性があります...おそらくEdgeにアップグレードしますか？ 私たちは提案を提供できると思います。

@tmcconechy 、このアプリケーションでは、ユーザーが注文リストページの結果をフィルタリングするためにアクセスできる4つの複数選択ドロップダウンコントロールがあります。 これらのドロップダウン内に表示されるオプションの量は、ユーザーの選択と、ユーザーに付与されている権限（役割）に基づいています。 通常のユーザーは、ごく一部のオプションしか表示できないように制限されます。 彼らが選択を行うと、追加のフィルタリングに使用されるセカンダリドロップダウンコントロールにさらに多くのオプションを入力するAPI呼び出しがあります。 （これらのドロップダウンは相互に通信します。）

完全な管理者権限を持つユーザーには、ドロップダウンコントロール内のすべてのオプションが表示されます。 現在、オプションの総数は1969年です。その数は、クライアントが使用したいものに基づいて増える可能性があります。

ユーザーにはコントロール内に2〜50個のオプションしか表示されない場合がありますが、追加の権限が付与されている場合、ユーザーが持つオプションの数は1969年まで拡張できます。複数選択コントロールが最適なオプションである場合、特に大多数のユーザーに表示されるオプションの数が少ない場合に、ユーザーが対話してフィルタリングプロセスを実行するための追加の手順。

IE11は対処するのにイライラします。コントロール内に非常に多くのオプションがある場合、パフォーマンスは最適ではないことを私は知っています。 これと同じコントロールは、「複数」の設定なしで使用され、単一の選択ドロップダウンだけでは、最大2000のオプションがある場合、IE11で同じパフォーマンスの懸念はありません。 複数選択としてのみ、この大きなパフォーマンスの問題があります。

また、ブラウザをアップグレードするように指示するのと同じくらい簡単なことを望みますが、このアプリケーションは、主にIE11を使用しているクライアントの顧客向けです。

@tmcconechy @EdwardCoyle
私はIE用にこのコードを最適化するためにさまざまなソリューションを使用してきましたが、一度実装するとIE11のパフォーマンスを向上させるソリューションは見つかりませんでした。 この時点での私の推奨事項は、パフォーマンスを向上させたい場合は、プッシュバックして別のコンポーネントを提案することです。 現在のところ、ドロップダウンと複数選択はどちらも最大500アイテムで非常にうまく機能します。 この号で要求されている2000年は、そのようなコンポーネントには過剰であるように思われます。
このコメントスレッドとは別に、アドバイスを受け取ったり、話し合ったりできてうれしいです。

@picitelliこれらの条件下でIE11をサポートするように求め

@davidcarlsonberg @clepore @ nickwynja @ tmcconechyこれについてチャットする必要があります。 パフォーマンスに対処するためのアイデアはいくつかありますが、それらのアイデアは「リファクタリング」の領域に行き着きます。

2000のドロップダウンと2000のマルチセレクトには大きな違いがあると思いました。より迅速なゲインを得るために、そこでの速度の違いを調べましたか。

パフォーマンス低下の根本原因をもっと調べていました。 このチケットの範囲を変更して、すぐに勝つためにそこで何が得られるかを確認したい場合は、ドロップダウンの複数選択とプレーンドロップダウンを調査できます。

はい、それは間違いなく一見の価値があります私はこのコメントに基づいてこの仮定をしていましたhttps://github.com/infor-design/enterprise/issues/843#issuecomment -424495956

たとえ「少し」速くても、何でも役立つかもしれません

ドロップダウンと複数選択の違いを判断して改善します。

@EdwardCoyleは、効率を上げるために最新の手法を使用してこれを点で正しいと思います。 この@davidcarlsonbergに1日以上費やす価値があるかどうかは

@picitelliこのパフォーマンスエッジケースに対処するためのオプションを引き続き検討します。

この場合の最良のオプションは、ビジーインジケーターを使用することだと思います。

ビジーインジケータは、システムが要求を処理していること、および現在のタスクを続行する前にその要求が処理されるのを待つ必要があることをユーザーに通知します。

フィールドでの使用例を次に示します。

• https://design.infor.com/code/ids-enterprise/4.10.0/demo/busyindicator/example-inputs?font=source-sans
• https://github.com/infor-design/enterprise/blob/4.10.0/app/views/components/busyindicator/example-inputs.html

最良のエクスペリエンスは、1秒ほど待って、リストがまだ表示されていない場合にのみビジーインジケーターを表示することです。

macOS上の最近のChromeで調べたところ、ドロップダウンと複数選択のresponse()実行時間の違い。 単位に注意してください。
ドロップダウン：512.14ミリ秒
複数選択：1.02秒

@tmcconechy @davidcarlsonberg @EdwardCoyle @clepore私は誰もがこの問題を調査して感謝しています。 特に@davidcarlsonberg 、これに時間を費やしてくれてありがとう。 私たちはIE11向けに最適化するために、ほぼ2週間努力してきましたが、行き止まりにしか遭遇しませんでした。 私は、このコントロールがこれらの多くのオプションを処理することを意図しておらず、別のコントロールがより適しているという評価に同意します。

@nickwynjaは、忙しいインジケーターの推奨事項をデザインで取り上げ、彼らが何を言っているかを確認します。

本当にありがとう！

QAテストが含まれていないため、この問題を解決します。 詳細については、コメントを参照してください。