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

Colt McAnlis

शुरुआती जानकारी

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

दार्शनिक सवाल

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

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

  • अलग-अलग एचटीएमएल पेजों का सुइट जनरेट करें. हर पेज में एक डीओएम एलिमेंट और उससे जुड़ी सीएसएस प्रॉपर्टी के कुछ बदलाव होते हैं.
  • कुछ ऐसी ऑटोमेशन स्क्रिप्ट चलाएं जो हर पेज के लिए:
    • 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 के निर्देशों का इस्तेमाल करने के लिए, Skia Picture (*.SKP) का इस्तेमाल किया जाता है. हर एचटीएमएल फ़ाइल के लिए SKP फ़ाइलें जनरेट होने के बाद, हम एक और बैच चलाते हैं, जो *.SKP फ़ाइलों को Skia बेंचमार्क ऐप्लिकेशन (Skia सोर्स कोड से बनाया गया) के ज़रिए पुश करने के लिए चलाता है. इससे उस पेज को रेंडर करने में लगने वाला औसत समय कम हो जाता है.

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

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

टेस्ट में सभी क्रमचयों के लिए समय

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

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

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

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

टेस्ट में सभी क्रमचयों के लिए समय

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

टेस्ट में सभी क्रमचयों के लिए समय

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

अपने पेज के रेंडर का वज़न जानना

इसमें डेवलपर के पास पेज के हर एलिमेंट को रेंडर होने में लगने वाले समय को ट्रैक करने की सुविधा होती है. इससे डेवलपर के पास यह जानने का विकल्प होता है कि पेज के रेंडर होने में कितना समय लगता है. साथ ही, वह आपकी साइट के रिस्पॉन्स पर कैसे असर डालता है, इस बारे में जानने के लिए यहां कुछ सुझाव दिए गए हैं

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

फ़ाइनल थॉट

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

रेफ़रंस