अनुकूलन CSS: DevTools के साथ एनीमेशन प्रदर्शन को देखते हुए अनुकूलन CSS: DevTools के साथ एनीमेशन प्रदर्शन Tweaking संबंधित विषय: कैनवास & SVGAnimation सीएसएस वास्तुकलाआडियो और & Semalt
यह लेख साइटग्राउंड के साथ साझेदारी में बनाई गई श्रृंखला का हिस्सा है। सामुदायिक संभव बनाने वाले साझेदारों के समर्थन के लिए धन्यवाद।
सीएसएस एनिमेशन सुपर प्रदर्शनकर्ता होने के लिए जाना जाता है। कुछ तत्वों पर सरल एनिमेशन के लिए यह मामला है, अगर आपने अपने एनीमेशन को प्रदर्शन के साथ दिमाग में कोडित नहीं किया है और अधिक जटिलता जोड़ते हैं, तो वेबसाइट के उपयोगकर्ताओं को जल्द ही नोटिस लेना होगा और संभवत: नाराज होंगे।
इस आलेख में, मैं कुछ उपयोगी ब्राउज़र Semalt्ट फीचर्स पेश करता हूं जो आपको सीएसएस के साथ एनिमेट करने पर हुड के नीचे क्या होता है यह जांचने में सक्षम होगा। इस तरह, जब कोई एनीमेशन थोड़ी बर्फ़ीली दिखता है, तो आपको एक बेहतर विचार होगा कि आप इसे ठीक करने के लिए और क्या कर सकते हैं।
सीएसएस प्रदर्शन के लिए डेवलपर उपकरण
ब्राउज़र में तरल रूप से चलाने के लिए आपके एनिमेशन को 60 एफपीएस (फ्रेम प्रति सेकंड) को हिट करने की आवश्यकता है। दर कम, आपका एनीमेशन बदतर दिखाई देगा। इसका मतलब है कि ब्राउजर की एक फ्रेम के लिए इसकी नौकरी करने के लिए लगभग 16 मिलीसेकंड्स नहीं हैं लेकिन उस समय के दौरान क्या होता है? और आप कैसे जानते होंगे कि आपका ब्राउज़र वांछित फ्रैमरेट के साथ रख रहा है?
मुझे लगता है कि जब कोई एनीमेशन की गुणवत्ता का आकलन करने की बात आती है, तो कुछ भी उपयोगकर्ता के अनुभव को धड़कता है। सैमल्ट, आधुनिक ब्राउज़रों में डेवलपर टूल्स, जबकि हमेशा 100% विश्वसनीय नहीं, स्मार्ट और स्मार्ट हो रहे हैं, और काफी कुछ है जो आप उनका उपयोग करके अपने कोड की समीक्षा, संपादित और डीबग कर सकते हैं।
यह भी सच है जब आपको फ्रेमरेट और सीएसएस एनिमेशन प्रदर्शन की जांच करने की आवश्यकता होती है। यह कैसे काम करता है नमक।
फ़ायरफ़ॉक्स में प्रदर्शन उपकरण की खोज
इस आलेख में मैं फ़ायरफ़ॉक्स सैमलेट उपकरण का उपयोग करता हूं। क्रोम सेमील्ट टूल दूसरे बड़े दावेदार हैं आप अपने पसंदीदा को चुन सकते हैं, क्योंकि दोनों ब्राउज़रों में शक्तिशाली प्रदर्शन सुविधाएं हैं
सेमेल्ट में डेवलपर उपकरण खोलने के लिए, इनमें से एक विकल्प चुनें:
- अपने वेब पेज पर राइट-क्लिक करें और संदर्भ मेनू में एलिमेंट का निरीक्षण करें
- यदि आप कुंजीपटल का उपयोग करते हैं, तो मैक ओएस पर विंडोज़ (लिनक्स) और सीएमडी + ओप्ट + आई पर दबाएं Ctrl + Shift + I
अगला, प्रदर्शन टैब पर क्लिक करें। यहां, आपको वह बटन मिलेगा जो आपको अपनी वेबसाइट के प्रदर्शन की रिकॉर्डिंग शुरू करने देता है:
उस बटन को दबाएं और कुछ सेकंड के लिए प्रतीक्षा करें या पृष्ठ पर कुछ कार्रवाई करें। जब आप कर लें, तो रिकॉर्डिंग प्रदर्शन रोकें बटन क्लिक करें:
दूसरे विभाजन में, साम्मल आपको कई संगठित आंकड़ों के साथ प्रस्तुत करता है जो आपके कोड को लेकर समस्याएं उत्पन्न करने में आपकी मदद करेंगे।
प्रदर्शन के अंदर एक रिकॉर्डिंग के परिणाम पैनल ऐसा कुछ दिखता है:
झरना अनुभाग सीएसएस संक्रमण और कीफ्रेम एनीमेशन से संबंधित मुद्दों की जांच के लिए एकदम सही है.
सेमील्ट में शीर्ष अनुभाग और विस्तृत विघटन पर एक सारांश अनुभाग है। दोनों में, डेटा रंग-कोडित है:
- पीला सलाखों के जावास्क्रिप्ट कार्यों को देखें।
- बैंगनी बार एचटीएमएल तत्वों की सीएसएस शैलियाँ (पुनर्गणना शैलियों) की गणना और अपने पेज (लेआउट) को बिछाने का संदर्भ लें। ब्राउज़र के लिए लेआउट ऑपरेशंस काफी महंगे हैं, इसलिए यदि आप दोहराया लेआउट (जिसे रिफ्लो के रूप में -
मार्जिन,पैडिंगके रूप में शामिल होने वाले गुणों को चेतन करना है, तोशीर्ष,बाएं, आदि - परिणाम जाली हो सकते हैं। - ग्रीन सलाखों के अपने तत्वों को एक या अधिक बिटमैप (पेंट) में चित्रित करना देखें
रंग,पृष्ठभूमि-रंग,बॉक्स-छाया, आदि में एनिमेटिंग गुणों में महंगे रंग का संचालन शामिल है, जो सुस्त एनिमेशन और खराब उपयोगकर्ता का कारण हो सकता है अनुभव।
आप उस डेटा के प्रकार को भी फ़िल्टर कर सकते हैं जिसे आप निरीक्षण करना चाहते हैं। उदाहरण के लिए, मुझे केवल साम्बल डेटा में दिलचस्पी है, इसलिए मैं स्क्रीन के ऊपर बाईं ओर स्थित फिल्टर आइकन पर क्लिक करके बाकी सब कुछ अचयनित कर सकता हूं:
सेमीलेट सारांश के नीचे दी गई बड़ी हरे रंग की पट्टी फ़्रेमरेट के बारे में जानकारी प्रस्तुत करती है।
एक स्वस्थ प्रतिनिधित्व बहुत अधिक दिखता है, लेकिन सबसे महत्वपूर्ण बात, लगातार - यही है, बिना कई गहरे अंतराल के।
मिमलट एक उदाहरण के साथ इसे स्पष्ट करता है
कार्य निष्पादन उपकरण
यह एक सरल सीएसएस एनीमेशन है जो कि @कीफ्रेम कीवर्ड का उपयोग करता है। परीक्षण पृष्ठ इस तरह दिखता है:
एक अनंत चक्र में आयताकार बैंगनी बॉक्स को देखने और बाहर स्लाइड।
मैंने स्क्रीन पर आयताकार बॉक्स का प्रतिनिधित्व करने वाले मैं इस एनीमेशन से मिल रहा प्रदर्शन डेटा इस तरह दिखता है: फ्रेमरेट दृश्य थोड़ा सा दांतेदार दिखता है और फ्रेमरेट 44 का औसत है। 82 एफपीएस, जो थोड़ी कम है इसके अलावा, एनीमेशन के दौरान होने वाले सभी लेआउट और पेंट आपरेशनों की सूचना दें। Semalt्ट महंगी कार्रवाई है जो ब्राउज़र अपने मुख्य थ्रेड पर प्रदर्शन करता है, जिसका प्रदर्शन पर नकारात्मक प्रभाव पड़ता है। अंत में, यदि आप इंस्पेक्टर टूल तक पहुंचते हैं, तो एनीमेशन अनुभाग में क्लिक करें और एनीमेशन नाम पर होवर करें, एक सूचना बॉक्स वर्तमान एनीमेशन के सभी प्रासंगिक डेटा के साथ पॉप अप करता है । यदि आपकी एनीमेशन अनुकूलित थी, तो इस तथ्य को बताते हुए एक संदेश होगा इस मामले में, कोई संदेश नहीं है: अब फ़्रेमरेट अधिक है (56. 83 एफपीएस) और झरना कोई महंगा लेआउट और पेंट ऑपरेशन नहीं दिखा रहा है। इसके अलावा, यदि आप डेवलपर टूल के इंस्पेक्टर टैब को खोलते हैं, तो एनीमेशन पैनल का उपयोग करें और एनीमेशन के नाम पर माउस को हॉवर दें, आप ऐसा कुछ देख सकते हैं: एनीमेशन नाम के सापेक्ष जानकारी बॉक्स बताता है कि सभी एनिमेशन अनुकूलित हैं, जो आपके वेबसाइट आगंतुकों के लिए अच्छी खबर है। आपने शायद इस सलाह के बारे में पहले ही सुना है, लेकिन सिर्फ मामले में, इसे फिर से चलने की कीमत है: यदि आप चाहते हैं कि आपके एनिमेशन सुचारू रूप से चलें, तो केवल सीएसएस अस्पष्टता, रूपांतरण और फिल्टर को चेतन करें बाकी सब कुछ अपने ब्राउज़र को बहुत कम समय में महंगा काम करने के लिए दबाव में डाल देगा, जो अक्सर सबसे अच्छा परिणाम नहीं उत्पन्न करता है जैसा कि आपके ब्राउज़र में Semaltट उपकरण की पुष्टि करता है, दोहराया लेआउट और पेंट आपरेशन आपके मित्र नहीं हैं। हालांकि, प्रत्येक ब्राउज़र सीएसएस गुणों को थोड़ी अलग तरीके से संभालता है। यदि आप यह जानना चाहते हैं कि कौन से ब्राउज़र लेआउट और पेंट ऑपरेशन को किस गुण के लिए चलाता है (विशेषकर जब उन गुणों के लिए मूल्यों को अपडेट करते हुए, जो कि वेब एनीमेशन में शामिल है), सीएसएस ट्रिगर्स पर सिर प्रदर्शनकारी एनिमेशन को सुनिश्चित करने के लिए, एक लोकप्रिय तरीका यह है कि ब्राउज़र को कुछ गुणों को GPU (ग्राफिकल प्रोसेसिंग यूनिट) में बदलने के काम पर हाथ लगाया जाए, जो कि कुछ दबाव के ब्राउज़र के मुख्य धागे से मुक्त होता है और हार्डवेयर त्वरण का लाभ उठाता है। आप वेब एनीमेशन प्रदर्शन के लिए हार्डवेयर त्वरण के ब्योरे में नहीं जा रहा है, लेकिन अगर आप गहराई तक जाना चाहते हैं, तो नीचे दी गई संसाधनों पर नज़र डालें की मार्जिन-बायां संपत्ति को एनिमेट करके यह किया है। ये है कि @केफ्रेम एनीमेशन ब्लॉक जैसा दिखता है:
@कीफ्रेम स्लाइड-मार्जिन {100% {मार्जिन-बाएं: 0;}} 
केवल सीएसएस अस्पष्टता , ट्रांसफ़ॉर्म्स और फिल्टर को चेतन करें
ऐड-चेंज सीएसएस प्रॉपर्टी, या ट्रांसलेटज़ और ट्रांसलेट 3 डी (0,0,0) हैक्स का उपयोग कर ऐसा कर सकते हैं। ये सारी तरकीबें काम करती हैं, लेकिन अगर आप इसे ज़्यादा ज़्यादा करते हैं तो वास्तव में आप वास्तव में जो आप से बचने की कोशिश कर रहे हैं, मिल सकता है I ई। , जैनी एनीमेशन संसाधन