Enterprise: Die Dropdown-Steuerung für Mehrfachauswahl hat in IE11 eine schlechte Leistung, wenn die Dropdown-Liste +500 Optionen enthält

Die Ergebnisse in unserem Test dafür erscheinen mir viel besser als diese Zahlen.
http://master-enterprise.demo.design.infor.com/components/dropdown/test-2000-items.html

Vielleicht gibt es ein Problem mit der Mehrfachauswahl speziell. Sie haben den gleichen Code, aber ein paar unterschiedliche Pfade.

Am Ende Testcode hatten Sie einen? Oder viele Drop-Downs?

@tmcconechy , für meine Tests habe ich 5 Multiselect-Steuerelemente auf der Seite. Wenn ich diese Steuerelemente in ein Dropdown-Menü (keine Mehrfachauswahl) ändere, bemerke ich eine deutliche Verbesserung der Leistung. Dieses Problem scheint spezifisch für die Mehrfachauswahl-Steuerelemente zu sein.

Wenn Sie dieses Thema besprechen, sind Sie ein bisschen neugierig auf den tatsächlichen Anwendungsfall? Welche Art von Mehrfachauswahl trifft der Benutzer?

@picitelli ist der beste
Nach meinem Verständnis muss die Liste jedes Mal erstellt werden, wenn das Dropdown-Menü aktiviert wird, und je nach Benutzerrolle können bis zu etwa 2000 Elemente vorhanden sein. Sie müssen das Dropdown punktuell neu laden, können aber nicht mit dem Plugin von Mongoose kommunizieren.
Ich bin mir nicht sicher, welche Art von Mehrfachauswahl getroffen wird.
Ich habe viel darüber gelesen, dass IE11 eine schlechte Leistung beim Hinzufügen von Elementen zum DOM im Allgemeinen hat, und werde unten einige Links einfügen.
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-langsam

Auf jeden Fall ist der IE auf dem DOM langsam, aber ich habe mich über den tatsächlichen Anwendungsfall gewundert, bei dem dem Benutzer 500 Dinge angezeigt werden und er welche auswählen muss. Es scheint, als wären maximal 50 Auswahlmöglichkeiten für eine Entscheidungs-/Auswahl-UI besser geeignet.

Wir können es wahrscheinlich schneller machen, fragen uns jedoch, ob der Anwendungsfall besser von einer anderen Komponente bedient werden könnte.

Es wäre sicherlich besser durch eine andere Komponente zu bedienen, aber der Kunde bittet darum, das Dropdown-Menü zu verwenden. Ob wir zurückgehen und sagen wollen, dass dies nicht die richtige Komponente ist und Sie in IE11 auf Probleme stoßen werden ... vielleicht auf Edge upgraden? Ich nehme an, wir könnten den Vorschlag machen.

@tmcconechy , für unsere Anwendung haben wir 4 Dropdown-Steuerelemente mit Mehrfachauswahl, auf die ein Benutzer zugreifen kann, um die Ergebnisse auf einer Seite mit einer Bestellliste zu filtern. Die Anzahl der Optionen, die in diesen Dropdown-Listen angezeigt werden, basiert auf einer Benutzerauswahl und auch auf Berechtigungen (Rolle), die einem Benutzer gewährt werden. Ein normaler Benutzer kann nur eine kleine Auswahl an Optionen sehen. Sobald sie eine Auswahl getroffen haben, haben wir einen API-Aufruf, der weitere Optionen in einem sekundären Dropdown-Steuerelement auffüllt, das für zusätzliche Filterung verwendet wird. (Diese Dropdowns kommunizieren miteinander.)

Ein Benutzer mit vollständigen Administratorberechtigungen sieht alle Optionen im Dropdown-Steuerelement. Derzeit beträgt die Gesamtzahl der Optionen 1969. Diese Zahl kann steigen, je nachdem, was der Kunde verwenden möchte.

Ein Benutzer sieht möglicherweise nur 2 bis 50 Optionen innerhalb des Steuerelements, aber wenn ihm zusätzliche Berechtigungen gewährt werden, kann die Anzahl seiner Optionen bis auf 1969 erweitert werden. Wir möchten kein weiteres Steuerelement (z. B. Produktsuche) anbieten, das eine zusätzlicher Schritt für sie, um mit dem Filterprozess zu interagieren und ihn durchzuführen, wenn das Mehrfachauswahl-Steuerelement die beste Option ist, insbesondere wenn die Mehrheit der Benutzer eine geringere Anzahl von Optionen sehen wird.

Der Umgang mit IE11 ist frustrierend, und ich weiß, dass die Leistung nicht optimal ist, wenn es so viele Optionen innerhalb der Steuerung gibt. Das gleiche Steuerelement, das ohne die Einstellung "mehrere" verwendet wird und als Dropdown-Menü mit einer einzigen Auswahl nicht die gleichen Leistungsprobleme in IE11 hat, wenn es ~2000 Optionen gibt. Nur als Multiselect gibt es dieses große Leistungsproblem.

Ich wünschte auch, es wäre so einfach, ihnen zu sagen, dass sie ihren Browser aktualisieren sollen, aber diese Anwendung ist für die Kunden, die überwiegend IE11 verwenden.

@tmcconechy @EdwardCoyle
Ich habe mit verschiedenen Lösungen gearbeitet, um diesen Code für den IE zu optimieren, und bin auf keine Lösung gestoßen, die nach der Implementierung die Leistung in IE11 erhöht. Meine Empfehlung an dieser Stelle ist, zurückzudrängen und eine andere Komponente vorzuschlagen, wenn sie eine bessere Leistung wünschen. Ab sofort funktionieren Dropdown und Mehrfachauswahl mit bis zu 500 Elementen sehr gut. 2000, wie in dieser Ausgabe gefordert, erscheint mir für eine solche Komponente übertrieben.
Freue mich über jeden Ratschlag oder eine Diskussion, abgesehen von diesem Kommentarthread.

@picitelli Wenn wir unter diesen Bedingungen IE11 unterstützen sollen, ist die Lösung nicht einfach. Unsere Dropdown-Komponente müsste ziemlich gründlich überarbeitet werden, da sie nie für diese Art von Last entwickelt wurde.

@davidcarlsonberg @clepore @nickwynja @tmcconechy wir sollten uns darüber unterhalten. Ich habe einige Ideen, wie man die Performance ansprechen kann, aber diese Ideen landen im "Refactoring"-Gebiet.

Ich dachte, dass es einen großen Unterschied zwischen Dropdown mit 2000 und Multiselect mit 2000 gibt. Haben Sie den Geschwindigkeitsunterschied dort untersucht, um einen unmittelbaren Gewinn zu erzielen?

Ich suchte mehr nach der Ursache für den Leistungsabfall. Ich kann Dropdown-Mehrfachauswahl vs. einfache Dropdown-Liste untersuchen, wenn wir den Umfang dieses Tickets ändern möchten, um zu sehen, was dort für einen schnellen Gewinn erzielt werden kann.

Ja, es ist definitiv einen Blick wert, ich habe diese Annahme auf diesen Kommentar gestützt https://github.com/infor-design/enterprise/issues/843#issuecomment -424495956

Alles könnte helfen, auch wenn es nur ein bisschen schneller ist

Ich werde damit fortfahren, den Unterschied zwischen Dropdown und Mehrfachauswahl zu bestimmen und zu verbessern.

Ich denke, @EdwardCoyle hat @davidcarlsonberg zu verbringen .

@picitelli Wir werden weiterhin nach Optionen suchen, um dieses Leistungsproblem zu lösen.

Ich denke, die beste Option für diesen Fall ist die Verwendung einer Besetztanzeige :

Ein Belegt-Indikator teilt dem Benutzer mit, dass das System eine Anforderung verarbeitet und dass er auf die Verarbeitung dieser Anforderung warten muss, bevor er mit der aktuellen Aufgabe fortfahren kann.

Hier ist ein Beispiel für die Verwendung in einem Feld:

• 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

Am besten warten Sie etwa eine Sekunde und zeigen die Besetztanzeige nur an, wenn die Liste noch nicht angezeigt wurde.

Bei der Untersuchung in aktuellem Chrome auf macOS ist der Unterschied zwischen Dropdown- und Multiselect-Ausführungszeit response() . Bitte Einheiten beachten.
Dropdown: 512,14 ms
Mehrfachauswahl: 1,02 s

@tmcconechy @davidcarlsonberg @EdwardCoyle @clepore Ich @davidcarlsonberg , danke, dass du deine Zeit dafür

@nickwynja , wird Ihre

Danke nochmal an alle!

Schließen dieses Problems, da keine QS-Tests erforderlich sind. Weitere Informationen finden Sie in den Kommentaren.