Chrome देव टूल में "निरंतर पृष्ठ पुनरावृत्ति और डिबगिंग पृष्ठ redraws"

आज हम इस बारे में बात करेंगे कि Chrome देव उपकरण हमें अनावश्यक पृष्ठ redraws से निपटने में कैसे मदद करते हैं।

पिछले भाग:
कार्यक्षेत्र और स्निपेट्स
"सैस सपोर्ट"

ट्रेनिंग

हमेशा की तरह, अंतिम क्रोम कैनरी रखें । परीक्षण के लिए एक अलग वातावरण का उपयोग करने के लिए वैकल्पिक, लेकिन बहुत सुविधाजनक है। आज हमें जो कुछ भी चाहिए वह पहले से ही सक्रिय है।

स्थिति

असली मामले पर गौर कीजिए। एक बहुत ही सरल स्थानीय समाचार एग्रीगेटर पृष्ठ है । AngularJS पर बनाया गया। लेकिन आज यह बिल्कुल महत्वहीन है। समाचार फ़िल्टर करते समय, css एनीमेशन का उपयोग किया जाता है। और अब हम देखते हैं कि यह किसी भी तरह बहुत आसानी से काम नहीं करता है ...

समस्या की पहचान करें

क्रोम देव उपकरण खोलें ( Cmd / Ctrl + Shift + I )। समयरेखा टैब खोलें। इसके तहत, फ्रेम्स टैब पर जाएं। नीचे हमें रिकॉर्ड बटन मिलता है, इसे क्लिक करें और पृष्ठ पर विभिन्न समाचार फ़िल्टर करना शुरू करें।





होने वाली सभी घटनाओं को देव टूल्स विंडो में विभिन्न रंगों के आयतों के साथ दर्ज किया जाना शुरू हो जाएगा। इस मामले में, हम ऊपरी विंडो में अधिक रुचि रखते हैं, जो प्रति सेकंड फ़्रेम की संख्या प्रदर्शित करता है। आयत की ऊंचाई जितनी छोटी होगी -> 60 FPS (60 फ्रेम प्रति सेकंड) के करीब -> सभी के लिए बेहतर है। हमारे आवेदन, कुछ स्थानों पर, "बैठता है"। और यह रेंडरिंग (बैंगनी रंग) और पेंटिंग (हरा रंग) में "बैठता है"। ये दोनों घटनाएँ पृष्ठ के प्रतिपादन से जुड़ी हैं।



अब सेटिंग्स (निचले दाएं कोने में गियर आइकन) पर जाएं। सेटिंग्स में -> सामान्य हम रेंडरिंग सेटिंग समूह पाते हैं। ये सभी सेटिंग्स आपको पेज रेंडरिंग स्पीड डिबग करने में मदद करती हैं। क्रम में चलते हैं।



हम पहले आइटम " पेंट आयत दिखाएं " को चिह्नित करते हैं। यह सेटिंग पृष्ठ के सभी क्षेत्रों को फिर से पेंट करती है। हम लिंक का पालन करने की कोशिश करते हैं - सब कुछ ठीक है। हम फ़िल्टरिंग करते हैं - कई क्षेत्रों को कई बार लाल रंग में चित्रित किया जाता है, यह दुखद है।



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



इसके बाद " शो एफपीएस मीटर " है। Vyrviglazno-blood-red (क्या यह सिर्फ मैं हूं? ...) प्रति सेकंड फ्रेम की संख्या का एक माप। इसे केवल रीड्रिंग / रेंडरिंग की स्थिति में अपडेट किया जाता है, इसके लिए हम माउस के साथ ड्राइव करते हैं या न्यूज़ फ़िल्टरिंग करते हैं।

और इसलिए हमें इस लेख का मुख्य विषय मिला - " निरंतर पृष्ठ को पुन: सक्षम करना "। उपकरण वास्तविक समय में दिखाता है कि किसी पृष्ठ को प्रस्तुत करने में कितने मिलीसेकंड लगते हैं। हम अपना फ़िल्टरिंग करते हैं - हमें प्रति पृष्ठ अनुभाग 149.5 एमएस जितना मिलता है!



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



हम समाचार स्रोत के लेबल और उसके प्रकाशन के समय के लिए सीमा-त्रिज्या और पाठ-छाया को अक्षम करने का प्रयास करते हैं। एक अद्भुत उपकरण से पता चलता है कि इसने पृष्ठ रेंडरिंग के समय को कम कर 102.4 एमएस कर दिया !



ठीक है, आप और मैं शुरू में जानते थे कि यह सब कुछ एनीमेशन के बारे में था।



वोइला, अधिकतम समय 17.7 एमएस है । सही नहीं है, लेकिन हमने रेंडरिंग का समय 84.7 एमएस घटा दिया है!

सहायक संकेत: तत्व पैनल में: कुछ DOM तत्वों को निष्क्रिय करने के लिए, उन्हें हटाना आवश्यक नहीं है। आप बस उन्हें छिपा सकते हैं। बस आइटम का चयन करें और कीबोर्ड पर एच कुंजी दबाएं।

निष्कर्ष

पेज रेंडरिंग को गति देने के लिए आप क्रोम देव टूल्स का उपयोग कर सकते हैं। वास्तविक समय के प्रदर्शन में परिवर्तन देखने के लिए निरंतर पृष्ठ पुनरावृत्ति एक महान उपकरण है।

क्या निष्कर्ष निकाला जा सकता है? अपने वेब एप्लिकेशन के प्रदर्शन पर ध्यान दें। यह सभी प्रकार के एनिमेशन, छाया, गोलाई और अन्य चीजों के लिए विशेष रूप से सच है। सीमा-त्रिज्या और बॉक्स-छाया का एक साथ उपयोग न करने का प्रयास करें, क्योंकि इससे पृष्ठ रेंडरिंग गति को बहुत कम किया जा सकता है।

आशा है कि पोस्ट मददगार रही होगी। एक अच्छा कोडिंग है!