Enterprise: जब ड्रॉपडाउन सूची में +500 विकल्प होते हैं तो IE11 में बहु-चयन ड्रॉपडाउन नियंत्रण का प्रदर्शन खराब होता है

को निर्मित 25 सित॰ 2018 · 18टिप्पणियाँ · स्रोत: infor-design/enterprise

बग का वर्णन करें
हम उपयोगकर्ता को प्रपत्र में विकल्पों को फ़िल्टर करने की अनुमति देने के लिए कई SOHO बहु-चयन नियंत्रणों का उपयोग कर रहे हैं। बहु-चयन नियंत्रण में ५०-२००० श्रेणी से कहीं भी विकल्प होते हैं। ड्रॉपडाउन को खोलने में लगने वाला समय, एक बार उपयोगकर्ता द्वारा नियंत्रण में क्लिक करने के बाद और जब ड्रॉपडाउन वास्तव में खुलता है, तो अधिकांश आधुनिक ब्राउज़रों में अच्छा प्रदर्शन करता है। बहु-चयन नियंत्रण में जितने अधिक विकल्प होते हैं, उसे खुलने में उतना ही अधिक समय लगता है। यह समझ में आता है, क्योंकि एक बार नियंत्रण बन जाने के बाद, इसे SELECT तत्व के भीतर सभी विकल्प तत्वों के माध्यम से लूप करना होता है, ड्रॉपडाउन सूची नियंत्रण तत्व बनाना होता है, और फिर इसे दस्तावेज़ में जोड़ना होता है।

IE11 में परीक्षण के बाद, अन्य आधुनिक ब्राउज़रों की तुलना में प्रदर्शन काफी खराब है। मैंने कुछ परीक्षण किए और नीचे परीक्षण के लिए अपने परिणाम और प्रक्रिया शामिल की।

ड्रॉपडाउन को खोलने में लगने वाले समय का सटीक परीक्षण करने के लिए, मैंने Dropdown प्लगइन की open पद्धति के भीतर 2 चर बनाए।

मैंने open विधि की शुरुआत में प्रदर्शन को लॉग करने के लिए एक चर परिभाषित किया:

var performanceCheckStart = performance.now();

मैंने open विधि के अंत में प्रदर्शन को लॉग करने के लिए एक चर परिभाषित किया है:

var performanceCheckEnd = performance.now();

open विधि के अंत में, एक बार यह पूरा हो जाने पर, मैं कुल समय (मिलीसेकंड में) प्राप्त करने के लिए समाप्ति समय से प्रारंभ समय घटाता हूं।

console.log("Call to open took " + (performanceCheckEnd - performanceCheckStart) + " milliseconds.");

मैंने सूची में निम्नलिखित # विकल्पों के साथ बहु-चयन नियंत्रणों के लिए 10 परीक्षण किए:

100
500
1000
1500
2000

ये परीक्षण 2 ब्राउज़रों पर किए गए:

मैक ओएस पर क्रोम v69.0.3497.100 (नवीनतम)
विन 7 पर इंटरनेट एक्सप्लोरर 11

मैंने प्रत्येक ब्राउज़र परीक्षण के परिणामों का औसत निकाला और उन्हें नीचे दी गई तालिका में रखा।
_कृपया ध्यान दें कि प्रतिक्रिया समय मिलीसेकंड में है।_

मैक ओएस पर क्रोम

| # विकल्प | 100 | 500 | 1000 | 1500 | 2000 |
| --- | --- | --- | --- | --- | --- |
| एमएस | 53 | 170.26 | 317.93 | 474.15 | 756.73 |

विन 7 पर आईई 11

| # विकल्प | 100 | 500 | 1000 | 1500 | 2000 |
| --- | --- | --- | --- | --- | --- |
| एमएस | १७४.३१ | ६४८.२९ | १२५७.९९ | १८३६.२९ | २४९७.०६ |

इन परिणामों के आधार पर, यह स्पष्ट है कि ब्राउज़र में प्रदर्शन का महत्वपूर्ण नुकसान हुआ है और ड्रॉपडाउन सूची में अधिक विकल्प दिखाई देते हैं।

प्रजनन करना
व्यवहार को पुन: पेश करने के लिए कदम:
सोहो इलेवन वेब साइट पर बहु-चयन उदाहरणों का उपयोग करना
https://design.infor.com/code/ids-enterprise/4.10.0/demo/multiselect/example-index

बहु-चयन में अतिरिक्त विकल्प जोड़ें (500, 1000, 1500, 2000)
नियंत्रण प्रारंभ करें
आईई 11 (विंडोज 7 या विंडोज 10 का उपयोग करके) में, ड्रॉपडाउन सूची खोलने के लिए किसी एक नियंत्रण में क्लिक करें। ध्यान दें कि इसे खोलना कितना धीमा है।

अपेक्षित् व्यवहार
एक बार जब उपयोगकर्ता नियंत्रण में क्लिक करता है तो ड्रॉपडाउन सूची दिखाई देती है, लेकिन आईई 11 में प्रदर्शन बहुत खराब होता है जब सूची में 500 से अधिक विकल्प होते हैं

मंच

डिवाइस: लैपटॉप (वीएम)
ओएस संस्करण: विंडोज 7 [सर्विस पैक 1] (विंडोज 10 में भी इसी तरह के परिणामों की पुष्टि की गई)
ब्राउज़र का नाम: इंटरनेट एक्सप्लोरर (IE11)
ब्राउज़र संस्करण: ११.०.९६००.१९१२९

अतिरिक्त संदर्भ
क्या IE11 में इस नियंत्रण को जल्दी खोलने के लिए कोई प्रदर्शन सुधार किया जा सकता है?

[8] type

स्रोत

picitelli

सबसे उपयोगी टिप्पणी

मुझे लगता है कि @EdwardCoyle इस मायने में सही है कि हमें दक्षता के लिए और अधिक आधुनिक तकनीकों का उपयोग करके इसे जमीन से ऊपर उठाने की आवश्यकता होगी। मुझे यकीन नहीं है कि यह इस @davidcarlsonberg पर एक दिन से अधिक खर्च करने लायक है।

clepore 5 अक्तू॰ 2018

👍2

सभी 18 टिप्पणियाँ

इसके लिए हमारे परीक्षण के परिणाम मुझे उन संख्याओं की तुलना में बहुत बेहतर लगते हैं।
http://master-enterprise.demo.design.infor.com/components/dropdown/test-2000-items.html

शायद बहु-चयन के साथ विशेष रूप से कोई समस्या है। उनके पास एक ही कोड है लेकिन कुछ अलग रास्ते हैं।

अंत परीक्षण कोड में क्या आपके पास एक था? या कई ड्रॉप डाउन?

tmcconechy 25 सित॰ 2018

@tmcconechy , मेरे परीक्षण के लिए मेरे पास पृष्ठ पर 5 बहुविकल्पीय नियंत्रण हैं। जब मैं उन नियंत्रणों को ड्रॉपडाउन (गैर-बहुविकल्पी) में बदलता हूं, तो मुझे प्रदर्शन में एक महत्वपूर्ण सुधार दिखाई देता है। यह समस्या बहु-चयन नियंत्रणों के लिए विशिष्ट प्रतीत होती है।

picitelli 25 सित॰ 2018

👍1

इस मुद्दे पर चर्चा करते हुए, वास्तविक उपयोग के मामले के बारे में थोड़ा उत्सुक? उपयोगकर्ता किस प्रकार के बहु-चयन विकल्प बना रहा है?

tmcconechy 3 अक्तू॰ 2018

@picitelli बात करने के लिए सबसे अच्छे व्यक्ति हैं।
मेरी समझ से सूची को हर बार ड्रॉपडाउन लगे रहने की आवश्यकता होती है और उपयोगकर्ता की भूमिका के आधार पर लगभग 2000 आइटम तक कहीं भी हो सकते हैं। उन्हें बिंदुओं पर ड्रॉपडाउन पुनः लोड करने की आवश्यकता है, लेकिन Mongoose से प्लगइन के साथ संवाद नहीं कर सकते।
सुनिश्चित नहीं है कि किस प्रकार के बहु-चयन विकल्प बनाए जा रहे हैं।
मैंने आईई11 के बारे में बहुत कुछ पढ़ा है जिसमें सामान्य रूप से डीओएम में आइटम जोड़ने में खराब प्रदर्शन होता है और इसमें नीचे कुछ लिंक शामिल होंगे।
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

davidcarlsonberg 3 अक्तू॰ 2018

निश्चित रूप से आईई डीओएम पर धीमा है लेकिन मैं वास्तविक उपयोग के मामले में सोच रहा था जहां उपयोगकर्ता को 500 चीजें दिखायी जाती हैं और उसे चुनना होता है। ऐसा लगता है कि निर्णय/चयन UI के लिए अधिकतम 50 विकल्प अधिक उपयुक्त होंगे।

हम शायद इसे तेज कर सकते हैं, लेकिन सोच रहे हैं कि क्या उपयोग के मामले को एक अलग घटक द्वारा बेहतर ढंग से परोसा जाएगा।

tmcconechy 3 अक्तू॰ 2018

यह निश्चित रूप से एक अलग घटक द्वारा बेहतर सेवा प्रदान करेगा, लेकिन क्लाइंट पूछता है कि ड्रॉपडाउन का उपयोग करना है। क्या हम वापस जाना चाहते हैं और कहते हैं, यह सही घटक नहीं है और आप IE11 में मुद्दों में भाग लेने जा रहे हैं ... शायद एज में अपग्रेड करें? मुझे लगता है कि हम सुझाव दे सकते हैं।

davidcarlsonberg 3 अक्तू॰ 2018

@tmcconechy , हमारे आवेदन के लिए, हमारे पास 4 बहु-चयन ड्रॉपडाउन नियंत्रण हैं जिन्हें उपयोगकर्ता ऑर्डर सूची पृष्ठ पर फ़िल्टर परिणामों तक पहुंच सकता है। इन ड्रॉपडाउन में दिखाई देने वाले विकल्पों की मात्रा उपयोगकर्ता के चयन और उपयोगकर्ता को दी गई अनुमतियों (भूमिका) पर भी आधारित होती है। एक नियमित उपयोगकर्ता केवल विकल्पों की एक छोटी श्रृंखला देखने तक ही सीमित रहेगा। एक बार जब वे चयन कर लेते हैं, तो हमारे पास एक एपीआई कॉल होती है जो अतिरिक्त फ़िल्टरिंग के लिए उपयोग किए जाने वाले द्वितीयक ड्रॉपडाउन नियंत्रण में अधिक विकल्पों को पॉप्युलेट करती है। (ये ड्रॉपडाउन एक दूसरे के साथ संवाद करते हैं।)

पूर्ण व्यवस्थापक अनुमति वाले उपयोगकर्ता को ड्रॉपडाउन नियंत्रण में सभी विकल्प दिखाई देंगे। फिलहाल, विकल्पों की कुल राशि 1969 है। ग्राहक जो उपयोग करना चाहता है, उसके आधार पर यह संख्या बढ़ सकती है।

एक उपयोगकर्ता को नियंत्रण में केवल 2-50 विकल्प दिखाई दे सकते हैं, लेकिन यदि उन्हें अतिरिक्त अनुमति दी जाती है, तो उनके पास विकल्पों की मात्रा 1969 तक विस्तारित हो सकती है। हम एक और नियंत्रण (जैसे उत्पाद लुकअप) की पेशकश नहीं करना चाहते हैं जो एक जोड़ता है बहु-चयन नियंत्रण सर्वोत्तम विकल्प होने पर उनके साथ सहभागिता करने और उनकी फ़िल्टरिंग प्रक्रिया निष्पादित करने के लिए अतिरिक्त कदम, विशेष रूप से तब जब अधिकांश उपयोगकर्ताओं को विकल्पों की संख्या कम दिखाई देगी।

IE11 से निपटने में निराशा होती है, और मुझे पता है कि जब नियंत्रण में इतने सारे विकल्प होते हैं तो प्रदर्शन इष्टतम नहीं होता है। यह वही नियंत्रण, "एकाधिक" सेटिंग के बिना उपयोग किया जाता है, और केवल एक चयन ड्रॉपडाउन में ~ 2000 विकल्प होने पर IE11 में समान प्रदर्शन चिंताएं नहीं होती हैं। केवल एक बहु-चयन के रूप में यह बड़ा प्रदर्शन मुद्दा है।

मैं यह भी चाहता हूं कि यह उनके ब्राउज़र को अपग्रेड करने के लिए कहने जितना आसान था लेकिन यह एप्लिकेशन क्लाइंट ग्राहकों के लिए है, जो मुख्य रूप से आईई 11 पर हैं।

picitelli 3 अक्तू॰ 2018

@tmcconechy @EdwardCoyle
मैं आईई के लिए इस कोड को अनुकूलित करने के लिए विभिन्न समाधानों के साथ काम कर रहा हूं और किसी भी समाधान में नहीं आया है, जिसे एक बार लागू किया गया है, आईई 11 में प्रदर्शन बढ़ाता है। इस बिंदु पर मेरी सिफारिश है कि यदि वे बेहतर प्रदर्शन चाहते हैं तो उन्हें पीछे धकेलें और एक अलग घटक का सुझाव दें। फ़िलहाल, ड्रॉपडाउन और बहु-चयन दोनों 500 आइटम तक के साथ बहुत अच्छा प्रदर्शन करते हैं। 2000 जैसा कि इस मुद्दे में अनुरोध किया गया है, मुझे इस तरह के एक घटक के लिए अत्यधिक प्रतीत होगा।
इस टिप्पणी सूत्र के अलावा कोई सलाह या चर्चा प्राप्त करने में खुशी हुई।

davidcarlsonberg 5 अक्तू॰ 2018

👎1 👍1

@picitelli अगर उन शर्तों के तहत IE11 का समर्थन करने के लिए हमसे पूछना है, तो समाधान सीधा नहीं है। हमारे ड्रॉपडाउन घटक को बहुत गंभीर ओवरहाल की आवश्यकता होगी, क्योंकि इसे कभी भी उस प्रकार के भार को ध्यान में रखकर नहीं बनाया गया था।

@davidcarlsonberg @clepore @nickwynja @tmcconechy हमें इस बारे में बात करनी चाहिए। मेरे पास प्रदर्शन को संबोधित करने के बारे में कुछ विचार हैं लेकिन वे विचार "रिफैक्टरिंग" क्षेत्र में आते हैं।

EdwardCoyle 5 अक्तू॰ 2018

👍1

मैंने सोचा था कि 2000 के साथ ड्रॉपडाउन और 2000 के साथ बहु-चयन के बीच एक बड़ा अंतर था। क्या आपने अधिक तत्काल लाभ के लिए गति में अंतर का पता लगाया।

tmcconechy 5 अक्तू॰ 2018

मैं प्रदर्शन में कमी के मूल कारण को और अधिक देख रहा था। मैं ड्रॉपडाउन मल्टीसेलेक्ट बनाम प्लेन ड्रॉपडाउन की जांच कर सकता हूं अगर हम इस टिकट के दायरे को बदलना चाहते हैं तो यह देखने के लिए कि त्वरित जीत के लिए वहां क्या हासिल किया जा सकता है।

davidcarlsonberg 5 अक्तू॰ 2018

हां, यह निश्चित रूप से देखने लायक है कि मैं इस धारणा को इस टिप्पणी पर आधारित कर रहा था https://github.com/infor-design/enterprise/issues/843#issuecomment -424495956

कुछ भी मदद कर सकता है, भले ही वह "थोड़ा" तेज़ हो

tmcconechy 5 अक्तू॰ 2018

मैं ड्रॉपडाउन और बहु-चयन के बीच के अंतर को निर्धारित करने और सुधारने के लिए आगे बढ़ूंगा।

davidcarlsonberg 5 अक्तू॰ 2018

clepore 5 अक्तू॰ 2018

👍2

@picitelli हम इस प्रदर्शन बढ़त के मामले को

मुझे लगता है कि इस मामले के लिए सबसे अच्छा विकल्प व्यस्त संकेतक का उपयोग करना

एक व्यस्त संकेतक उपयोगकर्ता को सूचित करता है कि सिस्टम एक अनुरोध को संसाधित कर रहा है, और वर्तमान कार्य को जारी रखने से पहले उन्हें उस अनुरोध के संसाधित होने की प्रतीक्षा करनी चाहिए।

यहां इसे किसी क्षेत्र में उपयोग करने का एक उदाहरण दिया गया है:

सबसे अच्छा अनुभव यह होगा कि एक या दो सेकंड के लिए प्रतीक्षा करें और केवल व्यस्त संकेतक प्रदर्शित करें यदि सूची अभी तक प्रकट नहीं हुई है।

nickwynja 5 अक्तू॰ 2018

MacOS पर हाल ही में क्रोम में जांच करने पर ड्रॉपडाउन बनाम मल्टीसेलेक्ट response() निष्पादन समय में अंतर। कृपया ध्यान दें इकाइयां।
ड्रॉपडाउन: 512.14 एमएस
बहु-चयन: 1.02 s

davidcarlsonberg 5 अक्तू॰ 2018

👍1

@tmcconechy @davidcarlsonberg @EdwardCoyle @clepore मैं हर किसी को इस मुद्दे को देख सराहना करते हैं। विशेष रूप से @davidcarlsonberg , इस पर अपना समय बिताने के लिए धन्यवाद। हम IE11 के लिए अनुकूलित करने के लिए अपने अंत में लगभग 2 सप्ताह से प्रयास कर रहे हैं और मृत सिरों के अलावा कुछ भी नहीं चला। मैं इस आकलन से सहमत हूं कि यह नियंत्रण इन कई विकल्पों को संभालने के लिए नहीं था और दूसरा नियंत्रण बेहतर अनुकूल होगा।

@nickwynja , आपकी व्यस्त संकेतक अनुशंसा को डिज़ाइन के साथ ले जाएगा और देखें कि वे क्या कहते हैं।

सभी को फिर से धन्यवाद!

picitelli 5 अक्तू॰ 2018

इस मुद्दे को बंद करना क्योंकि इसमें कोई क्यूए परीक्षण शामिल नहीं है। अधिक जानकारी के लिए कृपया टिप्पणियाँ देखें।

davidcarlsonberg 10 अक्तू॰ 2018

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Enterprise: जब ड्रॉपडाउन सूची में +500 विकल्प होते हैं तो IE11 में बहु-चयन ड्रॉपडाउन नियंत्रण का प्रदर्शन खराब होता है

सबसे उपयोगी टिप्पणी

सभी 18 टिप्पणियाँ

संबंधित मुद्दों