अनुवाद के साथ तत्वों को स्थानांतरित करना स्थिति से बेहतर क्यों है: पूर्ण शीर्ष / बाएं

स्क्रीन के चारों ओर एक आइटम को स्थानांतरित करने के दो मुख्य तरीके हैं:

• CSS 2D रूपांतरण और translate() ;
• position:absolute और बदलते top/left ।

क्रिस कोएर ने हाल ही में लिखा है कि translate का उपयोग करना बेहतर और अधिक तर्कसंगत क्यों है (यह तेज़ है, और position संपत्ति लेआउट के साथ अधिक है, और दृश्य प्रभावों और एनीमेशन के साथ नहीं, translate विपरीत)।

मैं उनके जवाब पर विस्तार करना चाहता हूं और कुछ अच्छे उदाहरण देना चाहता हूं। मैंने एक स्क्रेंकास्ट रिकॉर्ड किया है जिसमें Chrome DevTools टाइमलाइन का उपयोग करके मैं GPU पर प्रदर्शन, प्रतिपादन और कंपोज़िंग के मामले में इन दृष्टिकोणों के बीच के अंतरों को देखता हूं।



यदि आपको एक संक्षिप्त पाठ संस्करण की आवश्यकता है, तो पढ़ें।

आइए उन उदाहरणों से शुरू करें जो क्रिस ने उद्धृत किए हैं:



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



यह बहुत बेहतर है। लेकिन पहले, चलो एक छोटी सी विषयांतर करें।

पिक्सेल स्नैप

डेमो से पता चलता है कि मैकबुक के शीर्ष किनारे top/left साथ उदाहरण में तेज दिखता है (और लेख कहता है कि translate बेहतर है। महान!) यह इस तथ्य के कारण है कि पिक्सेल स्थिति से पूर्ण स्थिति जुड़ी हुई है, और translate उप-विषयक का उपयोग करता है। प्रक्षेप।

क्रोम हार्डवेयर एक्सेलरेशन सबसिस्टम के डेवलपर्स में से एक, जेम्स रॉबिन्सन इसे "डबस्टेप प्रभाव" कहते हैं, क्योंकि चलते समय तत्व कम आवृत्तियों से कंपन करने लगते हैं। यदि आप कुल्हाड़ियों में से किसी एक को छोटा, सिर्फ तीन पिक्सेल के साथ बनाते हैं, तो अंतर बहुत ध्यान देने योग्य हो जाता है:



पिक्सेल ग्रिड पर कूदने पर बाईं ओर स्पष्ट रूप से दिखाई देता है। शायद यह विकल्प इस उदाहरण में बेहतर दिखता है, हालांकि कम विपरीत छवि के साथ यह इतना ध्यान देने योग्य नहीं हो सकता है।

वापस प्रदर्शन के लिए

यदि आप Chrome डेवलपर टूल में समयरेखा खोलते हैं, तो ये दो उदाहरण पूरी तरह से अलग दिखेंगे:



top/left साथ विकल्प बहुत समय ड्राइंग में खर्च करता है, और आंदोलन अधिक चिकोटी है। शैलियों में बड़ी छायाएं पंजीकृत हैं, और पृष्ठभूमि एक जटिल ढाल है, और यह सब सीपीयू पर गणना की जाती है। दूसरी ओर, translate मैकबुक को एक अलग परत पर खींचता है, सभी दो- या त्रि-आयामी रूपांतरण GPU पर किए जाते हैं, जो बहुत तेज है और एक चिकनी आंदोलन के लिए अनुमति देता है।

वीडियो के अंत में, मैं इन बिंदुओं पर विस्तार से बताता हूं और दिखाता हूं कि आप रेंडरिंग समय को कैसे माप सकते हैं, देखें कि किन क्षेत्रों को फिर से तैयार किया गया है, और किन मामलों में GPU का उपयोग किया जाता है।

डेमो

प्रभाव को अधिक स्पष्ट करने के लिए आप अधिक परतें जोड़ सकते हैं। खुला समय और प्रयोग:

एनीमेशन के लिए सिफारिशें

1. जब भी संभव हो CSS एनिमेशन और बदलाव का उपयोग करें। उन्हें अनुकूलित करने में ब्राउज़र बहुत अच्छा है।
2. यदि आपको जावास्क्रिप्ट के माध्यम से एनीमेशन करने की आवश्यकता है, तो setTimeout और setInterval बजाय requestAnimationFrame उपयोग करें।
3. हर फ्रेम में शैलियों को बदलने की कोशिश न करें (जैसा कि jQuery के animate() में किया गया था), सीएसएस में घोषित रूप से स्थापित एनिमेशन बहुत बेहतर अनुकूलित हैं।
4. निरपेक्ष स्थिति के बजाय 2 डी परिवर्तनों का उपयोग आमतौर पर तेजी से प्रतिपादन के कारण एक उच्च फ्रेम दर प्रदान करता है।
5. प्रदर्शन समस्याओं को खोजने और ठीक करने के लिए समयरेखा का उपयोग करें।
6. जब आप यह जानना चाहते हैं कि किन क्षेत्रों को फिर से तैयार किया गया है, तब पेंट पेंट के अनुपात और रेंडर कम्पोजिट लेयर बॉर्डर विकल्प उपयोगी हैं।