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

Colt McAnlis

परिचय

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

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

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

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

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

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

<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 फ़ाइलों को Skia बेंचमार्क ऐप्लिकेशन (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 Dev Tools में Chrome के Continuous Paint mode का इस्तेमाल करके, यह समझें कि कौनसी सीएसएस प्रॉपर्टी आपके लिए ज़्यादा खर्ची हैं.
  2. परफ़ॉर्मेंस से जुड़ी समस्याओं की जांच करने के लिए, अपने कोड की समीक्षा करने वाली मौजूदा प्रोसेस में सीएसएस की समीक्षाओं को शामिल करें अपने सीएसएस में ऐसी जगहें ढूंढें जहां ज़्यादा महंगी चीज़ों का इस्तेमाल किया जा रहा हो. जैसे, ग्रेडिएंट और शैडो. खुद से पूछें कि क्या मुझे इनकी ज़रूरत है?
  3. अगर आपको कोई संदेह है, तो हमेशा बेहतर परफ़ॉर्मेंस के लिए काम करें. आपके उपयोगकर्ताओं को शायद यह याद न हो कि आपके कॉलम की पैडिंग चौड़ाई क्या है, लेकिन वे यह याद रखेंगे कि आपकी साइट पर आने पर कैसा लगता है.

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

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

रेफ़रंस