पेंट प्रोफ़ाइलिंग के लिए, पेंटिंग का लगातार चलने वाला मोड अब Chrome Canary में उपलब्ध है. इस लेख में, पेज पेंट होने में लगने वाले समय से जुड़ी समस्या की पहचान करने का तरीका बताया गया है. साथ ही, पेज पेंट होने की परफ़ॉर्मेंस में आने वाली रुकावटों का पता लगाने के लिए, इस नए टूल का इस्तेमाल करने का तरीका भी बताया गया है.
आपके पेज पर पेंटींग में लगने वाले समय की जांच करना
इसलिए, आपको पता चला है कि आपका पेज आसानी से स्क्रोल नहीं हो रहा है. इस तरह, समस्या को हल करना शुरू किया जा सकता है. उदाहरण के लिए, हम डैन सेडरहोम के डेमो पेज Things We Left On The Moon का इस्तेमाल करेंगे.
वेब इंस्पेक्टर खोलें, टाइमलाइन रिकॉर्डिंग शुरू करें, और अपने पेज को ऊपर और नीचे स्क्रोल करें. इसके बाद, वर्टिकल टाइमलाइन देखें. इनसे आपको पता चलता है कि हर फ़्रेम में क्या हुआ.
अगर आपको पता चलता है कि ज़्यादातर समय पेंटिंग में बीत रहा है (60fps से ज़्यादा के हरे रंग के बड़े बार), तो आपको इसकी वजह जाननी चाहिए. अपने पेंट की जांच करने के लिए, वेब इंस्पेक्टर की पेंट रेक्टैंगल दिखाएं सेटिंग का इस्तेमाल करें. यह सेटिंग, वेब इंस्पेक्टर के सबसे नीचे दाएं कोने में मौजूद कोग आइकॉन में होती है. इससे आपको वे क्षेत्र दिखेंगे जहां Chrome, इमेज को रंग देता है.
Chrome, पेज के कुछ हिस्सों को फिर से पेंट करने की कई वजहें हो सकती हैं:
- JavaScript में DOM नोड बदल जाते हैं. इससे Chrome, पेज के लेआउट का फिर से हिसाब लगाता है.
- ऐसे ऐनिमेशन चल रहे हैं जो फ़्रेम-आधारित साइकल में अपडेट होते हैं.
- उपयोगकर्ता के इंटरैक्शन की वजह से, कुछ एलिमेंट की स्टाइल में बदलाव होता है. जैसे, कर्सर घुमाना.
- कोई भी ऐसा अन्य काम जिससे पेज का लेआउट बदल जाए.
डेवलपर के तौर पर, आपको अपने पेज पर होने वाले रीपेंट के बारे में पता होना चाहिए.
पेंट किए गए रेक्टैंगल देखकर, यह पता लगाया जा सकता है कि कौनसा रंग किस जगह पर इस्तेमाल किया गया है. ऊपर दिए गए स्क्रीनशॉट के उदाहरण में, आपको दिख सकता है कि पूरी स्क्रीन को बड़े रंग के रेक्टैंगल से कवर किया गया है. इसका मतलब है कि स्क्रोल करने पर, पूरी स्क्रीन फिर से पेंट की जाती है, जो ठीक नहीं है. इस खास मामले में, सीएसएस स्टाइल background-attachment:fixed की वजह से ऐसा होता है. इसकी वजह से, पेज की बैकग्राउंड इमेज एक ही जगह पर बनी रहती है, जबकि पेज का कॉन्टेंट स्क्रोल करने पर उसके ऊपर चलता रहता है.
अगर आपको पता चलता है कि दीवार के बड़े हिस्से को फिर से रंगना है और/या इसमें काफ़ी समय लगेगा, तो आपके पास ये दो विकल्प हैं:
- पेज लेआउट बदलकर, पेज पर पेंटिंग की संख्या कम की जा सकती है. अगर हो सके, तो Chrome सिर्फ़ एक बार दिखने वाले पेज को पेंट करता है. साथ ही, नीचे की ओर स्क्रोल करने पर, वे हिस्से जोड़ता है जो पहले नहीं दिख रहे थे. हालांकि, कुछ मामलों में Chrome को कुछ हिस्सों को फिर से पेंट करना पड़ता है. उदाहरण के लिए, सीएसएस नियम
position:fixed, जिसका इस्तेमाल अक्सर एक ही जगह पर बने नेविगेशन एलिमेंट के लिए किया जाता है, इस वजह से पेज फिर से रीडायरेक्ट हो सकता है. - अगर आपको अपने पेज का लेआउट नहीं बदलना है, तो उन हिस्सों को फिर से पेंट करने की लागत को कम किया जा सकता है. हर सीएसएस स्टाइल के लिए, पेंट करने की लागत एक जैसी नहीं होती. कुछ पर इसका असर कम होता है, जबकि कुछ पर ज़्यादा. कुछ स्टाइल में पेंटिंग की लागत का पता लगाना काफ़ी मुश्किल हो सकता है. ऐसा करने के लिए, एलिमेंट पैनल में स्टाइल टॉगल करें और टाइमलाइन रिकॉर्डिंग में अंतर देखें. इसका मतलब है कि पैनल के बीच स्विच करना और कई रिकॉर्डिंग करना. ऐसे में, कंटिन्यूअस पेंटिंग मोड का इस्तेमाल किया जा सकता है.
लगातार पेंट करने की सुविधा
कंटिन्यूअस पेंटिंग मोड एक ऐसा टूल है जिससे यह पता चलता है कि पेज पर कौनसे एलिमेंट ज़्यादा खर्चीले हैं. यह पेज को हमेशा फिर से पेंट करने की स्थिति में रखता है. साथ ही, यह दिखाता है कि पेज का कितना हिस्सा फिर से पेंट किया जा रहा है. इसके बाद, काउंटर को देखते हुए एलिमेंट छिपाएं और स्टाइल में बदलाव करें, ताकि यह पता लगाया जा सके कि कौनसी चीज़ धीमी है.
सेटअप
कंटिन्यूअस पेंटिंग मोड का इस्तेमाल करने के लिए, आपको Chrome Canary का इस्तेमाल करना होगा.
Linux सिस्टम (और कुछ Mac) पर, आपको यह पक्का करना होगा कि Chrome, कॉम्पोज़िटिंग मोड में चल रहा हो. about:flags में सभी पेजों पर जीपीयू कंपोज़िटिंग सेटिंग का इस्तेमाल करके, इसे हमेशा के लिए चालू किया जा सकता है.
शुरू करने का तरीका
पेज को लगातार रीपेंट करने की सुविधा को वेब इंस्पेक्टर की सेटिंग में जाकर चालू किया जा सकता है. इसके लिए, चेकबॉक्स पेज को लगातार रीपेंट करने की सुविधा चालू करें को चुनें. वेब इंस्पेक्टर के सबसे नीचे दाएं कोने में, यह सेटिंग मौजूद होती है.
सबसे ऊपर दाएं कोने में मौजूद छोटे डिसप्ले में, आपको पेंट करने में लगने वाला समय मिलीसेकंड में दिखता है. खास तौर पर, इसमें ये चीज़ें दिखती हैं:
- बाईं ओर, पेंट का पिछली बार मेज़र किया गया समय.
- दाईं ओर मौजूदा ग्राफ़ की कम से कम और ज़्यादा से ज़्यादा वैल्यू.
- सबसे नीचे, पिछले 80 फ़्रेम का इतिहास दिखाने वाला बार चार्ट. चार्ट में मौजूद लाइन, रेफ़रंस पॉइंट के तौर पर 16 मिलीसेकंड दिखाती है.
पेंट करने में लगने वाले समय का आकलन, स्क्रीन रिज़ॉल्यूशन, विंडो के साइज़, और उस हार्डवेयर पर निर्भर करता है जिस पर Chrome चल रहा है. ध्यान रखें कि ये चीज़ें आपके उपयोगकर्ताओं के लिए अलग हो सकती हैं.
वर्कफ़्लो
पेंटींग के लिए लगातार इस्तेमाल होने वाले मोड का इस्तेमाल करके, उन एलिमेंट और स्टाइल को ट्रैक किया जा सकता है जिनकी वजह से पेंटींग की लागत बहुत ज़्यादा बढ़ जाती है. इसके लिए, यह तरीका अपनाएं:
- वेब इंस्पेक्टर की सेटिंग खोलें और पेज को बार-बार फिर से रंगना चालू करें को चुनें.
- एलिमेंट पैनल पर जाएं और ऐरो बटन का इस्तेमाल करके या पेज पर मौजूद एलिमेंट चुनकर, डीओएम ट्री पर जाएं.
- किसी एलिमेंट को दिखने या न दिखने के बीच टॉगल करने के लिए, H कीबोर्ड शॉर्टकट का इस्तेमाल करें. यह एक नया सहायक टूल है.
- पेंट करने में लगने वाले समय का ग्राफ़ देखें और उस एलिमेंट का पता लगाने की कोशिश करें जिसकी वजह से पेंट करने में ज़्यादा समय लगता है.
- उस एलिमेंट की सीएसएस स्टाइल देखें. साथ ही, ग्राफ़ देखते समय उन्हें चालू और बंद करके, वह स्टाइल ढूंढें जिसकी वजह से पेज लोड होने में ज़्यादा समय लग रहा है.
- इस स्टाइल को बदलें और एक और टाइमलाइन रिकॉर्डिंग करें. इससे यह पता चलेगा कि इसकी वजह से आपके पेज की परफ़ॉर्मेंस बेहतर हुई है या नहीं.
नीचे दिए गए ऐनिमेशन में, स्टाइल टॉगल करने और पेंट करने में लगने वाले समय पर इसके असर को दिखाया गया है:
इस उदाहरण में दिखाया गया है कि सीएसएस स्टाइल box-shadow या border-radius में से किसी एक को बंद करने से, पेज को पेंट करने में लगने वाला समय बहुत कम हो जाता है. किसी एलिमेंट पर box-shadow और border-radius, दोनों का इस्तेमाल करने से पेंटिंग के लिए बहुत ज़्यादा समय लगता है, क्योंकि Chrome इसे ऑप्टिमाइज़ नहीं कर सकता. इसलिए, अगर आपके पास ऐसा एलिमेंट है जिसे उदाहरण में बताए गए एलिमेंट की तरह, बार-बार फिर से रंगना पड़ता है, तो आपको इस कॉम्बिनेशन से बचना चाहिए.
नोट
कंटिन्यूअस पेंटिंग मोड, दिख रहे पूरे पेज को फिर से पेंट करता है. आम तौर पर, किसी वेब पेज को ब्राउज़ करते समय ऐसा नहीं होता. आम तौर पर, स्क्रोल करने पर सिर्फ़ वे हिस्से दिखते हैं जो पहले नहीं दिख रहे थे. पेज पर किए गए अन्य बदलावों के लिए, सिर्फ़ सबसे छोटे हिस्से को फिर से रंगा जाता है. इसलिए, किसी दूसरी टाइमलाइन रिकॉर्डिंग की मदद से देखें कि स्टाइल में किए गए सुधारों का आपके पेज के पेंट टाइम पर असर पड़ा है या नहीं.
continuous painting mode का इस्तेमाल करने पर, आपको पता चल सकता है कि सीएसएस स्टाइल border-radius और box-shadow, पेज को पेंट करने में ज़्यादा समय लेते हैं. हालांकि, इन सुविधाओं का इस्तेमाल करना बंद नहीं किया गया है. ये सुविधाएं बेहतरीन हैं और हमें खुशी है कि ये आखिरकार उपलब्ध हो गई हैं. हालांकि, यह जानना ज़रूरी है कि इनका इस्तेमाल कब और कहां करना है.
इन्हें उन जगहों पर इस्तेमाल करने से बचें जहां बहुत ज़्यादा बार पेंट किया गया हो. साथ ही, इन्हें सामान्य तौर पर ज़्यादा इस्तेमाल करने से भी बचें.
लाइव डेमो
डेमो देखने के लिए यहां क्लिक करें. इसमें पॉल आयरिश, लगातार पेंट करने की सुविधा का इस्तेमाल करके, पेंट करने के एक खास तरीके की पहचान करते हैं.