छवियाँ पृष्ठभूमि दोहराने सीएसएस के लिए प्रदर्शन

Question

किसी भी एक पता है जो इन दो विकल्पों के बीच एक ब्राउज़र लोडिंग समय के लिए बेहतर होने जा रहा है:

background-image:url('1by1px.png'); 

या

background-image:url('10by10px.png'); 

द्वारा एक 1px Div के लिए दोहराया 1px अर्द्ध पारदर्शी पीएनजी। या एक बड़ा 10px द्वारा 10px कहते हैं।

ब्राउजर में दोहराई गई छवि को प्रदर्शित करने के लिए कुछ प्रकार की लूपिंग होनी चाहिए, और इसलिए मुझे आश्चर्य हुआ कि 1px by 1px छवि को प्रदर्शित करने के लिए लूपिंग के बहुत सारे कारण हैं जो वास्तव में हो सकता है कम लूपिंग के साथ एक बड़ी आयामी छवि से कम तेज़?

बेशक काउंटर तर्क छवि आकार 10by10 की तुलना में 1by1 के लिए छोटा है, लेकिन इसका मतलब यह नहीं है कि यह छोटा होना बेहतर है क्योंकि कई बार लूपिंग बड़े आकार के आकार को थोड़ा कम करने के रूप में उतनी ही अच्छी नहीं हो सकती है।

क्या कोई और जानता है कि कौन सा बेहतर होगा और ब्राउज़र इस तरह की स्थितियों को कैसे संभालेंगे?

Answer 1

पृष्ठभूमि छवि को दोहराते समय, प्रस्तुत करने के लिए आवश्यक समय केवल अंतिम स्केल छवि पर निर्भर करता है, मूल नहीं।

फ़ाइल में छवि को पीएनजी प्रारूप के रूप में संपीड़ित किया जाता है, लेकिन ब्राउज़र द्वारा लोड होने के बाद, यह आरजीबीए बिटमैप प्रारूप (पिक्सेल के लिए 4 बाइट्स) में है। पृष्ठभूमि को दोहराते समय, (इंटेल x86 पर कहें), ब्राउज़र का मूल कोड आरईपी MOVSD का उपयोग बिटमैप डेटा को रैम से वीडियो मेमोरी में ले जाने के लिए करेगा (यह मानक अनुक्रम है, जो ग्राफिक्स ड्राइवर के विभिन्न कार्यान्वयन पर अलग हो सकता है या विशिष्ट जीपीयू)।

मान लें कि HTML DIV का आयाम जिसमें पृष्ठभूमि शामिल है 100x100 होगा।

केवल 1 पिक्सेल छवि के लिए: ब्राउज़र प्रोग्राम को 10 हजार 'आरईपी MOVSD' निर्देशों को निष्पादित करना होगा।

10x10 छवि के लिए: प्रत्येक दोहराई गई छवि के साथ, ब्राउज़र प्रोग्राम को केवल 'आरईपी MOVSD' निष्पादित करना होता है (1 बार कॉलिंग 'आरईपी MOVSD' छवि के 1 पिक्सेल लाइन (पिक्सेल पंक्ति) प्रस्तुत कर सकता है)। तो इस मामले में, निष्पादित 'आरईपी MOVSD' निर्देशों की संख्या केवल 10x100 बार होगी (1 छवि में 10 बार, 100 बार दोहराई गई छवियां)। यह पूरी तरह से 1 हजार 'आरईपी MOVSD' लेता है।

इसलिए, बड़ी छवि के आधार पर अंतिम पृष्ठभूमि को तेजी से प्रदान किया जाएगा।

अधिक नोट्स: उपर्युक्त स्पष्टीकरण का मतलब यह नहीं है कि प्रदर्शन 10x10 छवि के लिए बिल्कुल 10 गुना बेहतर है। एक 'आरईपी MOVSD' (उदाहरण के लिए सीएक्स = 99 99 के साथ) केवल 1 सिंगल सीपीयू निर्देश है लेकिन अभी भी 99 बसx4 बाइट्स को डेटा बस के माध्यम से स्थानांतरित करने की आवश्यकता है। यदि 99 99 सरल 'एमओवी का उपयोग करते हैं, तो डेटा डेटा के माध्यम से अभी भी बहुत अधिक डेटा जाना है, हालांकि, सीपीयू को 99 8 निर्देशों को और अधिक निष्पादित करना है। एक और चालाक ब्राउज़र पृष्ठभूमि के लिए प्रतिलिपि बनाई गई छवियों के साथ पूर्व-प्रस्तुत बिटमैप बनाएगा; इसलिए प्रत्येक बार इसे वीडियो मेमोरी में स्थानांतरित करने की आवश्यकता होती है, इसके लिए केवल 10 हजार या 1 हजार की बजाय केवल 100 'आरईपी MOVSD' (100 अंतिम पृष्ठभूमि में पिक्सेल पंक्तियों की संख्या है) की आवश्यकता होती है।

Answer 2

मैं पॉल के जवाब से सहमत हूं। मैंने हाल ही में Google क्रोम डेवलपर टूल के साथ कुछ मोटा परीक्षण किया था। मैंने पृष्ठभूमि छवि के शीर्ष पर अर्ध-पारदर्शी पीएनजी छवियों के विभिन्न आकार का उपयोग किया और स्क्रीन पेंट टाइम का उपयोग करके यह देखने के लिए कि स्क्रीन रीफ्रेश करने में कितना समय लगता है।

2x2 छवि:

बिना -webkit-बदलने हैक (गोल) ताज़ा करने के लिए समय: 65-160ms

10x10 छवि: 60-150ms

यहाँ नतीजा है

100x100 छवि: 55-135ms

1000x1000 छवि: 55-130ms

साथ -webkit-बदलने हैक (गोल) ताज़ा करने के लिए समय:

2x2 छवि: 40-120ms

10x10 छवि: 30- 90 एमएमएस

100x100 छवि: 30-90ms

1000x1000 छवि: 30-90ms

वैसे ही जैसे पौलुस ने कहा, बड़ी छवि को लोड करने में कम समय लगेगा (ताज़ा), छोटी छवि से है। लेकिन, ऐसा लगता है कि छवि 10px से बड़ी हो रही है के बाद यह कम प्रभावी हो रही है। मुझे 100x100 और 1000x1000 के बीच बहुत अंतर नहीं दिख रहा है।

मेरी राय में, एक बड़ी छवि आपको एक उल्लेखनीय परिणाम नहीं देगी, और यह लोडिंग समय बढ़ा सकती है। इसलिए, मुझे लगता है कि 10 से 100 के आसपास का आकार प्रदर्शन और लोडिंग समय के लिए पर्याप्त है।

लेकिन फिर भी, अलग-अलग छवि के अलग-अलग परिणाम हो सकते हैं, मुझे लगता है कि आपको सटीक परिणाम के लिए Google Chrome डेवलपर टूल में पेज पेंट टाइम टूल के साथ अपनी साइट का परीक्षण करना चाहिए।