डीओएम तत्वों (क्रोम)

Question

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

| Self Time  | Total Time  | Activity   | 
|-----------------|-----------------|---------------------| 
| 3579 ms (67.5%) | 3579 ms (67.5%) | Rendering   | 
| 3455 ms (65.2%) | 3455 ms (65.2%) | Hit Test   | <- this one 
| 78 ms (1.5%) | 78 ms (1.5%) | Update Layer Tree | 
| 40 ms (0.8%) | 40 ms (0.8%) | Recalculate Style | 
| 1343 ms (25.3%) | 1343 ms (25.3%) | Scripting   | 
| 378 ms (7.1%) | 378 ms (7.1%) | Painting   | 

यह सब कुछ (!) की 65% तक ले जाता है, मेरे codebase में एक राक्षस टोंटी शेष। मुझे पता है कि यह ऑब्जेक्ट को पॉइंटर के तहत ट्रेस करने की प्रक्रिया है, और मेरे पास यह बेकार विचार है कि इसे कैसे अनुकूलित किया जा सकता है (कम तत्वों का उपयोग करें, कम माउस ईवेंट आदि का उपयोग करें)।

प्रसंग: ऊपर प्रदर्शन प्रोफ़ाइल मेरे ऐप है, जहां स्क्रीन की सामग्री को खाली क्षेत्र को खींच कर चारों ओर ले जाया जा सकता है में एक "स्क्रीन पैनिंग" सुविधा को दर्शाता है। इसके परिणामस्वरूप कई वस्तुओं को स्थानांतरित किया जा रहा है, प्रत्येक वस्तु के बजाय अपने कंटेनर को अलग-अलग स्थानांतरित करके अनुकूलित किया जाता है। I made a demo.

---

इस में कूद से पहले, मैं, हिट परीक्षण (उन अच्छा ol '"कोई श * टी, शर्लक" ब्लॉग लेख) के अनुकूलन का सामान्य सिद्धांतों के लिए खोज करने के साथ-साथ करना चाहता था जैसे कि इस छोर पर प्रदर्शन को बेहतर बनाने के लिए कोई भी युक्ति मौजूद है (जैसे GPU प्रसंस्करण को सक्षम करने के लिए translate3d का उपयोग करना)।

मैं js optimize hit test तरह के प्रश्नों की कोशिश की, लेकिन परिणाम लेख और मैनुअल कार्यान्वयन उदाहरण प्रोग्रामिंग ग्राफिक्स से भरे हुए हैं - यह रूप में अगर जे एस समुदाय नहीं था यहां तक ​​कि से पहले इस बात की सुना है! क्रोम devtools guide में भी इस क्षेत्र की कमी है।

• संपादित करें: वहाँ इस सवाल है, लेकिन यह बहुत मदद नहीं करता है: तो यहाँ What is the Chrome Dev Tools "Hit Test" timeline entry?

मैं गर्व से अपना शोध के साथ किया हूँ, पूछ: मैं देशी हिट अनुकूलन के बारे में कैसे मिलता है जावास्क्रिप्ट में परीक्षण?

---

I prepared a demo कि प्रदर्शन टोंटी को दर्शाता है, हालांकि यह बिल्कुल मेरे वास्तविक ऐप जैसा नहीं है, और संख्या स्पष्ट रूप से और साथ ही उपकरण के आधार पर अलग अलग होंगे।टोंटी देखने के लिए:

1. क्रोम पर समय टैब पर जाएं (या आपके ब्राउज़र के समकक्ष)
2. प्रारंभ रिकॉर्डिंग है, तो एक पागल आदमी
3. रिकॉर्ड करना रोकें और चेक की तरह डेमो में आसपास पैन परिणाम

---

सभी महत्वपूर्ण अनुकूलन मैं पहले से ही इस क्षेत्र में किया है की एक संक्षिप्त:

• स्क्रीन पर एक ही कंटेनर आगे बढ़ के बजाय कंटेनर ले जाने के लिए
• v-सिंक कर रहा है माउस आंदोलन ताज़ा दर
• सभी संभव अनावश्यक "आवरण" और हटाने स्क्रीन करने के लिए "फिक्सर transform: translate3d का उपयोग कर व्यक्तिगत रूप से
• तत्वों के हजारों चलती "तत्वों
• pointer-events: none आकार पर का उपयोग कर - कोई प्रभाव नहीं

अतिरिक्त नोट्स:

• टोंटी के साथ दोनों और बिना GPU त्वरण
• परीक्षण केवल क्रोम में किया गया था मौजूद है, नवीनतम
• डोम ReactJS का उपयोग कर प्रदान की गई है, लेकिन एक ही मुद्दे के बिना यह मानने योग्य है, के रूप में जुड़ा हुआ डेमो में देखा

Answer 1

समस्याओं में से एक यह है कि आप अगर आप GPU- त्वरण या नहीं, यह कोई बात नहीं अपने कंटेनर के अंदर हर एक तत्व आगे बढ़ रहे है, बोतल गर्दन recalcu है अपनी नई स्थिति को झुकाव, वह प्रोसेसर क्षेत्र है।

मेरा सुझाव यहां कंटेनरों को विभाजित करना है, इसलिए आप अलग-अलग पैन को व्यक्तिगत रूप से लोड कर सकते हैं, लोड को कम कर सकते हैं, इसे व्यापक चरण गणना कहा जाता है, यानी केवल स्थानांतरित करने की आवश्यकता होती है। अगर आपको स्क्रीन से कुछ मिला है, तो आपको इसे क्यों ले जाना चाहिए?

एक, 16 कंटेनर के बजाय बनाने से शुरू करें, आपको यह पता लगाने के लिए यहां कुछ गणित करना होगा कि इनमें से कौन से पैन दिखाए जा रहे हैं। फिर, जब एक माउस घटना होती है, तो केवल उन पैन को ले जाएं और उन लोगों को छोड़ दें जिन्हें वे दिखाए गए हैं। इससे उन्हें स्थानांतरित करने के लिए उपयोग किए जाने वाले समय को बहुत कम करना चाहिए।

+------+------+------+------+ 
| SS|SS |  |  | 
| SS|SS |  |  | 
+------+------+------+------+ 
|  |  |  |  | 
|  |  |  |  | 
+------+------+------+------+ 
|  |  |  |  | 
|  |  |  |  | 
+------+------+------+------+ 
|  |  |  |  | 
|  |  |  |  | 
+------+------+------+------+ 

इस उदाहरण पर, हमारे पास 16 पैन हैं, जिनमें से 2 दिखाए जा रहे हैं (स्क्रीन के लिए एस द्वारा चिह्नित)। जब कोई उपयोगकर्ता पैन करता है, तो "स्क्रीन" के बाउंडिंग बॉक्स को चेक करें, यह पता लगाएं कि कौन से पैन "स्क्रीन" से संबंधित हैं, केवल उन पैन को ले जाएं। यह सैद्धांतिक रूप से असीम स्केलेबल है।

दुर्भाग्यवश मुझे विचार दिखाने वाले कोड को लिखने का समय नहीं है, लेकिन मुझे उम्मीद है कि यह आपकी मदद करेगा।

चीयर्स!