सीएसएस पेंट का समय और पेज रेंडर करने का वज़न

Colt McAnlis

परिचय

अगर आप उन लोगों में से हैं जो ब्राउज़र के काम करने के तरीके जैसी चीज़ों के बारे में जानकारी रखते हैं, तो आपको पहले से ही पता होगा कि हाल ही में कुछ शानदार लेख आए हैं. इनमें Chrome के जीपीयू की मदद से रेंडरर/कंपोज़िट ऑपरेशन के बारे में विस्तार से बताया गया है. सबसे पहले, Chrome में तेज़ी से रेंडरिंग: लेयर मॉडल से यह जानकारी मिलती है कि Chrome, पेज को ड्रॉ करने के लिए लेयर के कॉन्सेप्ट का इस्तेमाल कैसे करता है. ज़्यादा जानकारी के लिए, Chrome में जीपीयू की मदद से तेज़ी से कंपोज़िटिंग लेख पढ़ें. इसमें बताया गया है कि Chrome, आपके पेज को रेंडर करने के लिए जीपीयू के साथ-साथ इन लेयर का इस्तेमाल कैसे करता है.

फ़िलॉसफ़ी से जुड़ा सवाल

3D के लिए सॉफ़्टवेयर रास्टराइज़र लिखने में काफ़ी समय बिताने के बाद, मुझे यह समझ आया कि पेज को ड्रॉ करते समय कुछ सीएसएस प्रॉपर्टी की परफ़ॉर्मेंस अलग-अलग होनी चाहिए. उदाहरण के लिए, स्क्रीन पर किसी छोटी इमेज को रास्टराइज़ करना, किसी भी आकार पर ड्रॉप शैडो बनाने से बिलकुल अलग एल्गोरिदम वाला ऑपरेशन है. इसलिए, सवाल यह बन गया: अलग-अलग सीएसएस प्रॉपर्टी, आपके पेज के रेंडर-वेट पर कैसे असर डालती हैं?

मेरा लक्ष्य सीएसएस प्रॉपर्टी/वैल्यू के बड़े सेट को उनके पेंट टाइम के हिसाब से कैटगरी में बांटना था, ताकि हम यह समझ सकें कि किस तरह की सीएसएस प्रॉपर्टी, अन्य प्रॉपर्टी की तुलना में बेहतर परफ़ॉर्म करती हैं. इसके लिए, मैंने डक्ट-टेप और बबल गम के साथ कुछ ऑटोमेशन लिखे, ताकि सीएसएस पेंट के समय को अंकों में दिखाया जा सके. यह इस तरह से काम करता है:

  • अलग-अलग एचटीएमएल पेजों का एक सुइट जनरेट करें. हर पेज में एक DOM एलिमेंट और उससे जुड़ी सीएसएस प्रॉपर्टी का कुछ क्रम होना चाहिए.
  • कोई ऐसी ऑटोमेशन स्क्रिप्ट चलाएं जो हर पेज के लिए:
    • Chrome लॉन्च करें
    • कोई पेज लोड करना
    • पेज के लिए Skia पिक्चर जनरेट करें
    • समय की जानकारी पाने के लिए, Skia बेंचमार्क की मदद से ली गई हर Skia पिक्चर को चलाएं
  • सभी समय को डंप करें और संख्याओं को देखकर हैरान हो जाएं. (यह हिस्सा अहम है…)

इस सेटअप की मदद से, हम एचटीएमएल पेजों का एक सुइट जनरेट करते हैं. इसमें हर पेज पर सीएसएस प्रॉपर्टी और वैल्यू का एक यूनीक क्रम होता है. उदाहरण के लिए, यहां दो एचटीएमएल फ़ाइलें दी गई हैं:

<style>
#example1 {
    background: url(foo.png) top left / 50% 60%;
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

एक और तरीका है, जो थोड़ा मुश्किल है

<style>
#example1 {
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(circle closest-corner, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1">WOAH</div>

नीचे, पिछले उदाहरण के वैरिएंट के तौर पर, हम सिर्फ़ रेडियल-ग्रेडिएंट वैल्यू बदलते हैं:

<style>
#example1 
{
    background-color:#eee;
    box-shadow: 1px 2px 3px 4px black;
    border-radius: 50%;
    background: radial-gradient(farthest-side, white, black);
    padding: 20px; 
    margin-top: 10px;
    margin-right: 20px; 
    text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>

इसके बाद, हर पेज को Chrome के नए इंस्टेंस में लोड किया जाता है. इससे यह पक्का किया जाता है कि पेज को फिर से लोड करने पर, किसी भी पुरानी स्थिति की वजह से समय पर कोई असर न पड़े. साथ ही, Skia पिक्चर (*.SKP) ली जाती है, ताकि यह पता लगाया जा सके कि पेज को पेंट करने के लिए, Skia के किन निर्देशों का इस्तेमाल किया गया है. हर एचटीएमएल फ़ाइल के लिए SKP फ़ाइलें जनरेट होने के बाद, हम *.SKP फ़ाइलों को Skia Benchmark ऐप्लिकेशन के ज़रिए पुश करने के लिए, एक और बैच चलाते हैं. यह ऐप्लिकेशन, Skia सोर्स कोड से बनाया गया है. यह उस पेज को रेंडर करने में लगने वाले औसत समय को डंप करता है.

डेटा का आकलन करना

इससे, अब हमें यह अंदाज़ा लगाने में मदद मिलती है कि सीएसएस प्रॉपर्टी के किसी सुइट को रेंडर करने में कितना समय लगता है. इसके अलावा, हम सीएसएस प्रॉपर्टी को उनकी पेंट परफ़ॉर्मेंस के हिसाब से स्टैक-रैंक करना शुरू कर सकते हैं. यहां Chrome 27 बीटा से लिया गया एक बड़ा ग्राफ़ दिया गया है. इसमें इस प्रोसेस के टाइमिंग डेटा का पूरा सेट दिखाया गया है. ध्यान दें कि समय के साथ Chrome की स्पीड बढ़ने पर, सारा डेटा बदल सकता है.

टेस्ट में सभी क्रमपरिवर्तनों के लिए समय

हर वर्टिकल बार, सीएसएस प्रॉपर्टी के एक कॉम्बिनेशन वाले पेज के पेंट-टाइम को दिखाता है. इसे 100 गुना बड़ा करके दिखाया गया है. इस ग्राफ़ की सही स्केल वैल्यू 0,1.56 मि॰से॰ है. इसमें कई सुंदर लाइनें हैं, लेकिन इस फ़ॉर्म में यह कुछ हद तक बेकार है. काम के रुझान ढूंढने के लिए, हमें कुछ डेटा माइनिंग करनी होगी.

सबसे पहले, हमें इस बात का सबूत मिलता है कि कुछ सीएसएस प्रॉपर्टी को रेंडर करना, अन्य प्रॉपर्टी के मुकाबले ज़्यादा मुश्किल होता है. उदाहरण के लिए, किसी DOM एलिमेंट पर ड्रॉप-शैडो बनाने के लिए, स्प्लाइन और अन्य तरह की मुश्किल चीज़ों के साथ मल्टी-पास ऑपरेशन करना पड़ता है. इसके उलट, ओपैसिटी को रेंडर करना आसान होता है.

सिर्फ़ एक सीएसएस प्रॉपर्टी वाले एलिमेंट को पेंट करने में लगने वाला समय

दूसरी और ज़्यादा दिलचस्प बात यह है कि सीएसएस प्रॉपर्टी के कॉम्बिनेशन को पेंट होने में लगने वाला समय, उनके अलग-अलग हिस्सों को पेंट होने में लगने वाले समय के योग से ज़्यादा हो सकता है. किसी ऑब्ज़र्वर के नज़रिए से, यह थोड़ा अजीब है. हमें उम्मीद है कि A+B = C होगा, न कि 2.2C. उदाहरण के लिए, box-shadow और border-radius-stroke को जोड़ना:

टेस्ट में सभी क्रमपरिवर्तनों के लिए समय

इस बारे में सबसे दिलचस्प बात यह है कि यह सिर्फ़ box-shadow प्रॉपर्टी नहीं है, बल्कि वैल्यू का वह खास क्रम है. उदाहरण के लिए, यहां box-shadow : 50% और border-radius की वैल्यू में हुए बदलावों के हिसाब से ग्रुपिंग दिखाई गई है.

टेस्ट में सभी क्रमपरिवर्तनों के लिए समय

डेटा के मुताबिक, यह सिलसिला कुछ समय तक चलता है. कई तरह के अजीब कॉम्बिनेशन हैं और मेरा टेस्ट सुइट उन सभी को मुश्किल से ही छू पाता है; अब भी कई टेस्ट और कॉम्बिनेशन हैं जिनसे दिलचस्प नतीजे मिल सकते हैं

अपने पेज का रेंडर-वेट ढूंढना

डेवलपर के पास, आपके पेज पर मौजूद हर एलिमेंट के रेंडर होने में लगने वाले समय को ट्रैक करने की सुविधा होती है. इससे वे पेज के रेंडर होने में लगने वाले समय का आकलन कर सकते हैं. साथ ही, यह भी देख सकते हैं कि इससे आपकी साइट की रिस्पॉन्सिवनेस पर क्या असर पड़ता है. यहां कुछ सलाह दी गई हैं, जिनकी मदद से शुरुआत की जा सकती है

  1. Chrome DevTools में Chrome के कंटीन्यूअस पेंट मोड का इस्तेमाल करके, यह जानें कि सीएसएस की कौनसी प्रॉपर्टी आपके लिए महंगी साबित हो रही हैं.
  2. परफ़ॉर्मेंस से जुड़ी समस्याओं का पता लगाने के लिए, कोड की समीक्षा करने की अपनी मौजूदा प्रोसेस में सीएसएस की समीक्षाओं को शामिल करें. अपने सीएसएस में ऐसी जगहें ढूंढें जहां ऐसी चीज़ों का इस्तेमाल किया जा रहा है जो ज़्यादा महंगी हैं. जैसे, ग्रेडिएंट और शैडो. खुद से पूछें कि क्या मुझे वाकई यहां इनकी ज़रूरत है?
  3. अगर आपको कोई संदेह है, तो हमेशा बेहतर परफ़ॉर्मेंस को प्राथमिकता दें. ऐसा हो सकता है कि आपके उपयोगकर्ताओं को यह याद न रहे कि आपके कॉलम की पैडिंग की चौड़ाई कितनी है. हालांकि, उन्हें यह ज़रूर याद रहेगा कि आपकी साइट पर आने का अनुभव कैसा था.

आखिर में कुछ ज़रूरी बातें

इस एक्सपेरिमेंट की सबसे दिलचस्प बात यह है कि Chrome के हर वर्शन के साथ समय बदलता रहेगा. उम्मीद है कि यह और तेज़ हो जाएगा ;) ब्राउज़र सॉफ़्टवेयर की सतह लगातार बदलती रहती है. आज जो धीमा है, वह कल तेज़ हो सकता है. इस लेख से आपको यह जानकारी मिल सकती है कि किसी ऐसे एलिमेंट में box-shadow: 1px 2px 3px 4px न डालें जिसमें पहले से ही border-radius:5 मौजूद है. हालांकि, सबसे अहम बात यह है कि सीएसएस प्रॉपर्टी, आपके पेज के पेंट टाइम पर सीधे तौर पर असर डालती हैं.

रेफ़रंस