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