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에 하루 이상 보낼 가치가 있는지 잘 모르겠습니다.

@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.14ms
다중 선택: 1.02초

@tmcconechy @davidcarlsonberg @EdwardCoyle @clepore 이 문제를 조사하는 모든 분들께 감사드립니다. 특히 @davidcarlsonberg , 시간을 내주셔서 감사합니다. 우리는 IE11에 최적화하기 위해 거의 2주 동안 노력했지만 막다른 골목에 빠졌습니다. 이 컨트롤이 이러한 많은 옵션을 처리하기 위한 것이 아니며 다른 컨트롤이 더 적합하다는 평가에 동의합니다.

@nickwynja 는 바쁜 표시기 권장 사항을 디자인과 함께 사용하고 그들이 말하는 것을 볼 것입니다.

다시 한번 모두 감사합니다!

관련된 QA 테스트가 없으므로 이 문제를 종료합니다. 자세한 내용은 댓글을 참조하세요.