मन में प्रदर्शन के साथ बेहतर सीएसएस कैसे लिखें

आज की पोस्ट में हम उन कोड विकल्पों पर विचार करेंगे जो हम बेहतर प्रदर्शन के लिए CSS में बना सकते हैं। लेकिन, इससे पहले कि हम उन विकल्पों में डुबकी लगाते हैं, आइए पहले वेबपेज रेंडरिंग वर्कफ़्लो पर एक संक्षिप्त, करीब से नज़र डालें ताकि फ़ोकस पर ध्यान केंद्रित किया जा सकेसीएसएस के माध्यम से समस्याग्रस्त (प्रदर्शन-वार) क्षेत्र.

यहां DOM ट्री क्रिएशन के बाद ब्राउज़र द्वारा किए गए ऑपरेशंस का रफ फ्लो है:

1. पुनर्गणना शैली (और वृक्ष निर्माण प्रदान करें). ब्राउज़र डोम ट्री में तत्वों पर लागू होने वाली शैलियों की गणना करता है। एक रेंडर ट्री को बाद में DOM ट्री से नोड्स (एलिमेंट्स) को छोड़ते हुए बनाया जाता है जिसे रेंडर (एलिमेंट) नहीं किया जाता है कुछ भी डिस्प्ले मत करो) और वे जो (छद्म तत्व) हैं.
2. लेआउट (उर्फ रिफ़्लो). पहले से गणना की गई शैली का उपयोग करते हुए, ब्राउज़र पृष्ठ पर प्रत्येक तत्व की स्थिति और ज्यामिति की गणना करता है.
3. फिर से रंगना. एक बार लेआउट मैप हो जाने के बाद, पिक्सेल स्क्रीन पर आ जाते हैं.
4. समग्र परतें. निरस्त करने के दौरान, पेंटिंग अलग-अलग परतों में स्वायत्तता से की जा सकती है; फिर उन परतों को एक साथ जोड़ दिया जाता है.

अब हम ऑपरेशन के पहले तीन चरणों में बेहतर प्रदर्शन करने वाले सीएसएस कोड लिखने के लिए क्या कर सकते हैं, इस पर चलते रहें.

1. स्टाइल की गणना कम करें

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

महंगी शैली की गणना से बचने के लिए, कम जटिल और गहरी नेस्टेड चयनकर्ताओं ताकि ब्राउज़र के लिए यह पता लगाना आसान हो सके कि चयनकर्ता किस तत्व का उल्लेख कर रहा है। यह कम्प्यूटेशनल समय को कम करता है.

रोजगार के अन्य तरीकों में शामिल हैं शैली नियमों की संख्या कम करना (जहां संभव), अप्रयुक्त सीएसएस को हटाने और परहेज अतिरेक और अतिरेक, ताकि ब्राउज़र को शैली गणना के दौरान बार-बार उसी शैली से गुजरना न पड़े.

2. Reflows कम करें

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

किसी तत्व में लेआउट परिवर्तनों से प्रतिफल ट्रिगर होते हैं, जैसे ज्यामितीय गुणों में परिवर्तन जैसे ऊँचाई या फ़ॉन्ट का आकार, तत्वों को कक्षाओं को जोड़ना या हटाना, विंडो का आकार बदलना, सक्रिय होना : मंडराना, जावास्क्रिप्ट द्वारा डोम परिवर्तन, आदि.

बस स्टाइल गणना में, रेफ़्लो को कम करने के लिए, जटिल चयनकर्ताओं से बचें तथा गहरे डोम पेड़ (फिर से, यह Reflows के अत्यधिक कैस्केडिंग को रोकने के लिए है).

यदि आपको अपने पेज में एक घटक की लेआउट शैलियों को बदलना है, उस तत्व की शैलियों को लक्षित करें जो तत्वों के पदानुक्रम में सबसे कम है कि घटक से बना है। ऐसा इसलिए है कि लेआउट परिवर्तन किसी भी अन्य प्रतिक्षेप को ट्रिगर (लगभग) नहीं करता है.

यदि आप किसी ऐसे तत्व को एनिमेट कर रहे हैं, जो लेआउट परिवर्तन से गुजरता है, इसे पृष्ठ प्रवाह से बाहर निकालें द्वारा यह अनुपस्थित स्थिति, चूंकि पूरी तरह से तैनात तत्वों में Reflow बाकी तत्वों को पेज पर प्रभावित नहीं करेगा.

संक्षेपित करते हुए:

• लेआउट परिवर्तन करते समय DOM ट्री में कम होने वाले लक्ष्य तत्व
• लेआउट बदलते एनिमेशन के लिए पूरी तरह से तैनात तत्व चुनें
• जब भी संभव हो लेआउट गुणों को एनिमेट करने से बचें

3. रिपेयंट्स को कम करें

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

बार-बार और विशाल repaints से बचने के लिए, उन गुणों का कम उपयोग करें जो महंगे रिपींट का कारण बनते हैं छाया की तरह.

यदि आप किसी ऐसे तत्व के गुणों को अनुप्राणित कर रहे हैं जो सीधे या परोक्ष रूप से रेपेंट को ट्रिगर कर सकता है, तो यह बहुत फायदा होगा यदि वह तत्व अपनी परत में है पृष्ठ के बाकी हिस्सों को प्रभावित करने और हार्डवेयर त्वरण को ट्रिगर करने से इसकी पेंटिंग की संभावना को रोकना। हार्डवेयर एक्सेलेरेशन में, GPU लेयर में एनीमेशन में बदलाव करने का काम करेगा, प्रक्रिया को तेज करते हुए CPU अतिरिक्त काम की बचत करेगा.

कुछ ब्राउज़रों में, अस्पष्टता (से कम के मूल्य के साथ 1) तथा परिवर्तन (के अलावा अन्य मूल्य कोई नहीं) स्वचालित रूप से नई परतों को बढ़ावा दिया जाता है, और एनिमेशन और बदलाव के लिए हार्डवेयर त्वरण लागू किया जाता है। एनिमेशन के लिए इन गुणों का उल्लेख करना इस प्रकार अच्छा है.

जबरदस्ती करना एक तत्व को नई परत में बढ़ावा देना और हार्डवेयर त्वरण में जाना एनीमेशन के लिए, दो तकनीकें शामिल हैं:

1. जोड़ना रूपांतर: Translate3d (0, 0, 0); तत्व के लिए, एनिमेशन और बदलाव के लिए हार्डवेयर त्वरण को ट्रिगर करने में ब्राउज़र को धोखा देना.
2. जोड़ें बदल जाएगा तत्व को संपत्ति, जो उन गुणों के ब्राउज़र को सूचित करता है जो भविष्य में तत्व में बदलने की संभावना रखते हैं. ध्यान दें: सारा सूइदान का देव.पोरा साइट में इस पर एक गहन और सुपर-उपयोगी लेख है.

संक्षेपित करते हुए:

• महंगी शैली से बचें जो रेपेंट का कारण बनती हैं
• परत एनिमेशन और विषम एनिमेशन और बदलाव के लिए हार्डवेयर त्वरण चाहते हैं.

नोट करें

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

(२) यह भी उचित है जावास्क्रिप्ट में एक तत्व की शैलियों के लिए बहुत अधिक परिणामी परिवर्तन नहीं करें. इसके बजाय तत्व (जावास्क्रिप्ट का उपयोग करके) में एक वर्ग जोड़ें जो इन परिवर्तनों को करने के लिए नई शैलियों को रखता है - यह अनावश्यक प्रतिफल को रोकता है.

(३) आप करना चाहेंगे लेआउट पिटाई से बचें साथ ही (मजबूर तुल्यकालिक Reflows) जो जावास्क्रिप्ट का उपयोग करने वाले तत्वों के लेआउट गुणों के एक्सेस और संशोधन के कारण उत्पन्न होता है। इस प्रदर्शन को कैसे मारता है, इसके बारे में और पढ़ें.