उच्च प्रदर्शन जावास्क्रिप्ट लंबन

आपका स्वागत है!

मैं हॉट डॉट पर एक वेब डेवलपर फेडोर फुरिकुरेट्सु अनानिएव हूं, और आज मैं उन लोगों के लिए कुछ सरल सुझाव दूंगा जो अपने जेएस-लंबन एप्लिकेशन को बहुत तेज बनाना चाहते हैं।

कहानी हमारी नई साइट hotdot.pro के मुख्य पृष्ठ बनाने से प्राप्त अनुभव पर आधारित होगी। इस पृष्ठ को कई स्लाइड्स में विभाजित किया गया है, जिसमें से प्रत्येक स्लाइड ब्राउज़र विंडो के आकार पर होती है। प्रत्येक स्लाइड में तैरने वाले लंबन परत हो सकते हैं या नहीं भी हो सकते हैं। पृष्ठ की पृष्ठभूमि भी लंबन परत के नियमों के अनुसार चलती है।

यह सब जेएस से शुरू होता है

पहली, स्पष्ट समस्या जिसे मैं हल करना चाहता हूं वह स्क्रिप्ट है।

"हम इसे क्यों हल करना चाहते हैं?"

हमारे लंबन मॉडल में परत की स्थिति को बदलने और DOM में परिवर्तन करने के लिए लिपियाँ जिम्मेदार हैं। अधिक या कम प्रभावशाली एप्लिकेशन में कई परतें हैं। और एक परत को रेंडर करने के लिए आपकी आंखों के सामने कोड के करीब, जितनी बार यह ब्राउज़र द्वारा प्रति सेकंड कॉल किया जाएगा और जितना अधिक आप इसकी गति बढ़ाना चाहेंगे।

एक उदाहरण:
यदि हमारे लंबन में पाँच स्लाइड हैं, तो औसतन प्रत्येक स्लाइड में तीन परतें हैं, और हम लंबन को 25 एफपीएस की न्यूनतम स्वीकार्य फिल्म आवृत्ति के साथ अद्यतन करते हैं, तो एक परत रेंडर करने के लिए जिम्मेदार आपका कोड कहा जाएगा

5 × 3 × 25 = 375 बार प्रति सेकंड।

इस तरह का गणित कोड में अक्सर उपयोग किए जाने वाले स्थानों में हर ऑपरेशन का ट्रैक रखने के लिए प्रेरित करता है।

कंटेनर में फ्लोटिंग परत के 2 डी मॉडल को लंबे समय तक परीक्षण किया गया है, हाई स्कूल के छात्र के लिए मुश्किल नहीं है और इस लेख में छोड़ा जाएगा। हालांकि, ध्यान देने योग्य बात यह है कि परत पर अंगूठे का एक नियम लागू होता है:

एक परत की स्थिति को अपडेट करने के लिए, दो ऑपरेशन पर्याप्त हैं:

• माता-पिता के अंदर विस्थापन द्वारा एक निश्चित परत में निहित एक निश्चित निरंतर गुणांक को गुणा करना
• इस परत में निहित कुछ निरंतर प्रारंभिक स्थिति में पहले ऑपरेशन के परिणाम को जोड़ना।

- यह नियम हमारे लिए महत्वपूर्ण क्यों है?

क्योंकि इसके लिए धन्यवाद, हमें परत X की चौड़ाई X से दर्शक की स्थिति में प्रत्येक परिवर्तन के साथ परत X की स्थिति बनाने की आवश्यकता नहीं है, परत X की स्थिति अभिभावक, दर्शक की स्थिति और माता-पिता की चौड़ाई से है। पाँच या अधिक परिचालनों के बजाय, यह हमारे लिए पर्याप्त है कि हम उपरोक्त दोनों को करें। परत को आरंभ करते समय परत X और प्रारंभिक विस्थापन के लिए गुणांक विशिष्ट का चयन करना आवश्यक है।

आपके मन की स्थिति के लिए, अंगूठे का एक और नियम लागू होता है:

जब आप प्रति सेकंड पांच + 375 बार के बजाय दो ऑपरेशन करते हैं,
आप बहुत बेहतर महसूस करते हैं।

ब्राउज़र आपके मित्र फ्रीलांसर की तुलना में अधिक तेज़ी से आकर्षित करता है, लेकिन फिर भी पर्याप्त तेज़ी से नहीं

यदि हम ऐसे आशावादी हैं जो बहुत लंबे समय तक ब्राउज़रों के लिए विकास की दुनिया में नहीं आए हैं, तो हमारे लिए खोज यह होगी कि ड्राइंग तत्व जो स्क्रीन से दूर होने के बावजूद भी होते हैं।

हम, 3 डी इंजन में क्लासिक ट्रिक्स के आदी हैं, सोच सकते हैं कि स्क्रीन के बाहर सब कुछ किसी न किसी तरह से रेंडरिंग कतार से हटा दिया जाएगा। लेकिन इसे हटाया नहीं जाएगा।

परिणाम:
यदि आपके पास छुपाने का अवसर है (अर्थात्, सीएसएस-नियम प्रदर्शन को लागू करें: कोई नहीं) फिलहाल X उन तत्वों को जो स्क्रीन पर इस समय X पर प्रकट नहीं होते हैं - कृपया इसे सभी संभव तरीकों से करें।

लंबन के मामले में, तत्व स्लाइड हैं, और हमारे भाग्य के लिए, संपत्ति की परिभाषा "स्क्रीन के बाहर है" बहुत तुच्छ है।

वीडियो कार्ड

• यदि आप बाईं ओर के बजाय ट्रांसफ़ॉर्म 3 डी का उपयोग करके पूरी तरह से परतों की आवाजाही की व्यवस्था करते हैं, तो वेबकिट और गेको ब्राउज़रों में, आपको तुरंत प्रदर्शन को बढ़ावा मिलता है।
• ओपेरा में, केवल दो-आयामी संस्करण उपलब्ध है - translate । मेरे मामले में, इसके उपयोग से प्रदर्शन लाभ संदिग्ध था।
• इंटरनेट एक्सप्लोरर अन्य सभी ब्राउज़र को पूरी तरह से करता है जब क्लासिक लेफ्ट ऑफ़ ऑफसेट लेयर्स का उपयोग करता है। दिलचस्प रूप से पर्याप्त है, मेरे मामले में, translate3d का उपयोग करके इसके प्रदर्शन को कम कर दिया गया।

हम यह भी अच्छी तरह से जानते हैं कि translate करने के लिए स्विच करते समय हम निर्देशांक या प्रतिशत में एक ऑफसेट निर्दिष्ट करने की क्षमता खो देंगे। हमें ध्यान रखें कि कुछ मामलों में यह सीमा बल्कि दर्दनाक है।

रद्द करना

यह जानना बहुत मूल्यवान है कि डोम में एक बहुत ही छोटा परिवर्तन - जिसमें जड़ से पत्तियों के करीब नोड्स शामिल हैं - स्क्रीन पर सब कुछ और सब कुछ के एक बहुत ही महंगा redraw का कारण बनता है।

- व्यवहार में मेरे लिए इसका क्या अर्थ है?

यदि हमारे पृष्ठ पर उपयोगकर्ता को खिसकाने की प्रक्रिया में, हम कुछ अहानिकर छोटे एनीमेशन छोड़ते हैं, तो हमसे दूर और यहां तक कि छिपी स्लाइड में खेलने के लिए, ब्राउज़र हमारे पृष्ठ के पुनर्निर्माण की प्रक्रिया शुरू करेगा और बाद में पुनः निर्माण करेगा। हर बार जब एनीमेशन एक कदम आगे बढ़ेगा। और यह उस समय है जब उपयोगकर्ता पृष्ठ को स्क्रॉल करता है, और प्रोसेसर पहले से ही बड़ी मात्रा में परतों को जल्दी से स्थानांतरित करने की पूरी कोशिश कर रहा है। कदम आवृत्ति, उदाहरण के लिए, jQuery में 13 मिलीसेकंड है। अपने आप को संभालो : यह चोट लगी होगी।

- क्या उपयोगकर्ता पेज पर स्लाइड करते समय कम से कम कुछ बदलना संभव है?

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

जब हम प्रदर्शन की निगरानी करते हैं, तो परतों को हिलाना, डोम को संशोधित करने की हमारी क्षमता समाप्त हो जाती है।

सुंदर समाधान:
उपयोगकर्ता पृष्ठ के चारों ओर ले जाते समय सभी एनिमेशन अक्षम करें। तो प्रोसेसर के लिए बहुत महंगा एनिमेशन केवल तभी खेला जाएगा जब उपयोगकर्ता कहीं नहीं जा रहा है, और लंबन स्टेटिक्स में है। जब उपयोगकर्ता चलता है, तो प्रोसेसर केवल लंबन परतों को स्थानांतरित करने पर ध्यान केंद्रित करेगा।

आंकड़े

आइए हमारे स्टूडियो पृष्ठ के दो संस्करणों के लिए क्रोम के आंकड़ों को देखें: अनुकूलन और सक्षम के साथ अनुकूलन। आइए उदार बनें और हम पहले संस्करण में अनुकूलित जेएस को बंद नहीं करेंगे, और हम इसके लिए बहुत छोटी ड्राइंग अनुकूलन छोड़ देंगे।





परीक्षण संक्षिप्त था। मैंने साइट को बाएं से दाएं की ओर खींचा, जल्दी में नहीं। लेकिन इसलिए, दूसरे संस्करण के साथ परीक्षण भी बहुत क्रूर था, क्योंकि उसे लगातार छिपाना और दिखाना, छिपाना और स्लाइड दिखाना था!

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

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

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

आइए हम फ्रैमरेट में भारी अंतर पर एक नज़र डालें: यदि ब्राउज़र पहले चार्ट पर शायद ही कभी प्रति सेकंड तीस से अधिक फ्रेम देता है, तो यह शायद ही कभी दूसरे चार्ट पर प्रति सेकंड तीस से कम फ्रेम देता है।

---

यह एक शानदार परिणाम है।
जिन तकनीकों की हमने जांच की, उन्होंने बहुत काम लिया और सोचा।
लेकिन उन्होंने सचमुच हमें उत्पादक वेब अनुप्रयोगों के दायरे में ब्रेक के दलदल से बाहर निकाला।

मुझे उम्मीद है कि मेरा काम आपकी परियोजनाओं में आपके लिए उपयोगी होगा, और हमारे स्टूडियो के विकास के लिए आपका ध्यान देने के लिए धन्यवाद।
सौभाग्य है