पेंट प्रोफ़ाइलिंग के लिए, लगातार पेंटिंग मोड अब Chrome कैनरी में उपलब्ध है. इस लेख में बताया गया है कि पेज पेंटिंग समय में आने वाली समस्या की पहचान कैसे की जाती है और पेंटिंग परफ़ॉर्मेंस में आने वाली रुकावटों का पता लगाने के लिए इस नए टूल का इस्तेमाल कैसे किया जा सकता है.
आपके पेज पर पेंटिंग के समय की जांच की जा रही है
इसलिए आपने देखा कि आपका पेज आसानी से स्क्रोल नहीं होता है. ऐसे में, समस्या को इस तरीके से हल करना शुरू किया जा सकता है. उदाहरण के लिए, हम उदाहरण के तौर पर डैन सेडरहोम के डेमो पेज 'क्या-क्या करें', लेफ़्ट ऑन द मून का इस्तेमाल करेंगे.
वेब इंस्पेक्टर खोलें, टाइमलाइन रिकॉर्डिंग शुरू करें, और अपने पेज को ऊपर नीचे स्क्रोल करें. फिर वर्टिकल टाइमलाइन देखकर, आपको पता चलेगा कि हर फ़्रेम में क्या हुआ.
अगर आपको लगता है कि ज़्यादातर समय पेंटिंग (60fps से ज़्यादा वाले हरे रंग के बार) में लग जाता है, तो आपको यह जानना होगा कि ऐसा क्यों हो रहा है. अपने पेंट की जांच करने के लिए, Web Inspector की पेंट रेक्टैंगल दिखाएं सेटिंग (वेब इंस्पेक्टर के सबसे नीचे दाएं कोने में कॉग आइकॉन) का इस्तेमाल करें. इससे आपको वे क्षेत्र दिखेंगे जहां Chrome पेंट करता है.
Chrome के लिए, पेज के हिस्सों को फिर से पेंट करने की कई वजहें हो सकती हैं:
- JavaScript में DOM नोड बदल जाते हैं, जिसकी वजह से Chrome, पेज के लेआउट का फिर से आकलन करता है.
- ऐनिमेशन चल रहे हैं, जो फ़्रेम-आधारित साइकल में अपडेट होते हैं.
- उपयोगकर्ता के इंटरैक्शन, जैसे कि कर्सर घुमाने से कुछ एलिमेंट की स्टाइल बदल जाती है.
- ऐसा कोई भी अन्य ऑपरेशन जिसकी वजह से पेज का लेआउट बदलता है.
एक डेवलपर के रूप में आपको अपने पेज पर हो रहे फिर से पेंट के बारे में जानकारी होनी चाहिए.
पेंट रेक्टैंगल को देखकर, यह काम आसानी से किया जा सकता है. उदाहरण के तौर पर ऊपर दिए गए
स्क्रीनशॉट में देखा जा सकता है कि पूरी स्क्रीन, पेंट के एक बड़े रेक्टैंगल से ढकी हुई है. इसका मतलब है कि स्क्रोल करने पर पूरी स्क्रीन फिर से पेंट हो जाती है, जो कि अच्छी नहीं है. इस मामले में, सीएसएस स्टाइल background-attachment:fixed की वजह से पेज के बैकग्राउंड की इमेज, पेज के कॉन्टेंट के ऊपर एक ही जगह पर स्क्रोल होती है.
अगर आपको पता चलता है कि पेंट का एक बड़ा हिस्सा कवर हो रहा है और/या उसे बनाने में ज़्यादा समय लग रहा है, तो आपके पास दो विकल्प हैं:
- पेंटिंग का समय कम करने के लिए, पेज का लेआउट बदलें. अगर हो सके, तो Chrome, दिखने वाले पेज को सिर्फ़ एक बार पेंट करता है और ऐसे हिस्से जोड़ देता है जो नीचे स्क्रोल करने पर नहीं दिखते. हालांकि, कुछ मामलों में Chrome को कुछ हिस्सों को फिर से पेंट करने की ज़रूरत पड़ती है. उदाहरण के लिए, सीएसएस नियम
position:fixedका इस्तेमाल, अक्सर एक ही जगह पर रहने वाले नेविगेशन एलिमेंट के लिए किया जाता है. इस वजह से, ये एलिमेंट फिर से पेंट हो सकते हैं. - अगर आपको अपने पेज का लेआउट बनाए रखना है, तो उन जगहों को पेंट करने की लागत कम करें जिन्हें फिर से पेंट किया जाता है. हर सीएसएस स्टाइल की पेंटिंग की कीमत एक जैसी नहीं होती. कुछ पर ज़्यादा असर नहीं पड़ता और कुछ पर बहुत ज़्यादा असर पड़ता है. किसी खास स्टाइल की पेंटिंग की कीमत पता करने में बहुत मेहनत लगती है. ऐसा करने के लिए, एलिमेंट पैनल में स्टाइल को टॉगल करें और टाइमलाइन की रिकॉर्डिंग में अंतर को देखें. इसका मतलब है कि एक से दूसरे पैनल पर स्विच करके, अलग-अलग तरह की रिकॉर्डिंग की जा सकती हैं. यहां लगातार पेंटिंग मोड इस्तेमाल किया जाता है.
लगातार पेंटिंग मोड
लगातार पेंटिंग मोड, एक ऐसा टूल है जिससे आपको यह पता लगाने में मदद मिलती है कि पेज पर कौनसे एलिमेंट महंगा है. यह पेज को हमेशा के लिए फिर से पेंट करने की स्थिति में डाल देता है, जिससे पता चलता है कि पेंटिंग पर कितनी मेहनत हो रही है. इसके बाद, एलिमेंट को छिपाया जा सकता है और काउंटर के हिसाब से स्टाइल में बदलाव किया जा सकता है. इससे यह पता लगाया जा सकता है कि एलिमेंट कितना धीमा है.
सेटअप
लगातार पेंटिंग मोड का इस्तेमाल करने के लिए, आपको Chrome कैनरी का इस्तेमाल करना होगा.
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 पेंटिंग में लगने वाला समय काफ़ी बढ़ जाता है. इन सुविधाओं का इस्तेमाल करने में
कोई परेशानी नहीं है, ये शानदार हैं और हमें खुशी है कि ये उपलब्ध हैं. हालांकि, यह जानना और ज़रूरी है कि उनका इस्तेमाल कब और कहां करना है.
जिन जगहों पर दोबारा पेंट किया गया है वहां इनका इस्तेमाल करने से बचें. साथ ही, इनका ज़रूरत से ज़्यादा इस्तेमाल करने से बचें.
लाइव डेमो
नीचे एक डेमो देखें, जिसमें पॉल आइरिश ने महंगे पेंट ऑपरेशन की पहचान करने के लिए कंटिन्यूअस पेंटिंग का इस्तेमाल किया है.