मैंने हाल ही में लर्न डब्ल्यूसी जारी किया है और यदि आपने इसे देखा है, तो आपने संभवतः पृष्ठभूमि में एनीमेशन देखा होगा, जहां रंगीन वृत्त स्क्रीन पर विकर्ण रूप से चलते हैं। यह इस तरह दिख रहा है:

यह क्रोम और सफारी पर अच्छा काम करता है, लेकिन मैंने फ़ायरफ़ॉक्स पर प्रदर्शन में गंभीर गिरावट देखी है।

प्रदर्शन इतना खराब था कि मैंने सीधे फ़ायरफ़ॉक्स में इस एनीमेशन को अक्षम कर दिया।

एनीमेशन कैसे काम करता है?

एनीमेशन दो नेस्टेड divs का उपयोग करके बनाया गया है। बाहरी div साइट के बॉडी टैग का पहला बच्चा है।

.बैकग्राउंड-ग्रेडिएंट तत्व एक ग्रेडिएंट बनाने के लिए जिम्मेदार है जो उसके मूल कंटेनर की पूरी चौड़ाई और ऊंचाई तक फैला हुआ है। जैसे इतना:

बाहरी .बैकग्राउंड-मास्क दो चीजों के लिए जिम्मेदार है:

1. यह स्थिति को निश्चित पर सेट करता है, और कंटेनर को व्यूपोर्ट के संपूर्ण आयामों को भरने देता है।
2. ग्रेडिएंट पर एक बिंदीदार मुखौटा बनाता है

यह सुनिश्चित करता है कि बिंदुओं का रंग सीधे उसके नीचे ग्रेडिएंट का रंग है:

मैंने ऊपर जो कुछ भी वर्णित किया है उसके लिए यहां सीएसएस है:

.background-mask {
    --mask-size: 24px;

    /* Position Styles */
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;

    /* Mask Styles */
    mask-image: radial-gradient(black 2px, transparent 2px);
    mask-size: var(--mask-size) var(--mask-size);
    mask-position: 0px 0px;
    animation: mask-move 3s infinite linear;
}

.background-gradient {
    background: var(--red);
    background-image: var(--gradient);
    width: 100%;
    height: 100%;
}

@keyframes mask-move {
    0% {
        mask-position: 0px 0px;
    }

    100% {
        mask-position: var(--mask-size) var(--mask-size);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-background-mask {
        animation: none;
    }
}

यदि आप सीएसएस में मास्क के बारे में अधिक जानने में रुचि रखते हैं, तो मैं अहमद शदीद की इस व्यापक पोस्ट की अनुशंसा कर सकता हूं

प्रदर्शन में इस गिरावट का कारण क्या है?

सभी सीएसएस गुण समान रूप से एनिमेट नहीं होते हैं। ब्राउज़र पृष्ठ पर HTML कैसे प्रस्तुत करता है (हालाँकि मैंने इसे यहाँ रेखांकित किया है) के बारे में अधिक जाने बिना, यह कुछ चरणों से होकर गुजरता है। जिन तीन चरणों में हमारी रुचि है वे हैं:

• लेआउट - जब ब्राउज़र पृष्ठ पर तत्वों के आकार और स्थिति की गणना करता है
• पेंट - पृष्ठ के सभी दृश्य पहलुओं को चित्रित करता है, जैसे चित्र, रंग, छाया, आदि
• समग्र - तत्वों को एक दूसरे के ऊपर सही क्रम में रखना

पाइपलाइन का क्रम इस तरह दिखता है:

लेआउट → पेंट → कम्पोजिट

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

अनुवाद और अपारदर्शिता जैसे कुछ गुणों को एनिमेट करने से लेआउट को ट्रिगर करने से बचा जाता है और हार्डवेयर त्वरण का उपयोग किया जाता है।

अफसोस की बात है कि मास्क-पोजीशन को एनिमेट करते समय ऐसा नहीं होता है। मैंने क्रोम पर नज़र डाली और देखा कि हर फ्रेम पर बैकग्राउंड डिव के लिए पेंट की संख्या बढ़ रही थी। कुछ सेकंड के बाद यह 1,000 से अधिक बार पेंट को ट्रिगर कर चुका था।

इस उच्च पेंट गिनती के साथ भी, क्रोम पर एनीमेशन सहज लगता है। हालाँकि, फ़ायरफ़ॉक्स पर यह बहुत जानदार लगता है। कष्टप्रद बात यह है कि मुझे फ़ायरफ़ॉक्स पर पेंट की संख्या को मापने का कोई तरीका नहीं मिला, इसलिए फ़ायरफ़ॉक्स के खराब प्रदर्शन के बारे में मेरी कोई भी धारणा पूरी तरह से अनुमान है।

मैंने जो देखा वह यह है कि एनीमेशन छोटे उपकरणों के लिए ठीक है, लेकिन स्क्रीन का आकार बढ़ने के साथ यह खराब हो जाता है। मेरा कार्य सिद्धांत यह है कि फ़ायरफ़ॉक्स प्रत्येक 24x24 मास्क के लिए लेआउट ट्रिगर्स को बैच नहीं करता है, जिसके कारण अधिक 24x24 मास्क मौजूद होने पर एफपीएस टैंक हो जाता है। फिर, मैं यहां पूरी तरह से गलत हो सकता हूं।

मैंने इसे कैसे ठीक किया?

मास्क-पोजीशन जैसे बुरी तरह से अनुकूलित सीएसएस गुणों को एनिमेट करने के बजाय, मुझे अनुवाद जैसे अधिक प्रदर्शन गुणों पर निर्भर रहने की जरूरत थी।

समाधान मास्क को 24px तक स्थानांतरित करना नहीं था, बल्कि अनुवाद गुण का उपयोग करके संपूर्ण पृष्ठभूमि तत्व को स्थानांतरित करना था।

अमूर्त दृष्टिकोण से, एनीमेशन इस प्रकार दिखता है:

यहां सीएसएस में दो पंक्ति का परिवर्तन है:

/* --mask-size = 24px */

@keyframes mask-move {
    0% {
        transform: translate(calc(var(--mask-size) * -1), calc(var(--mask-size) * -1));
    }

    100% {
        transform: translate(0px, 0px);
    }
}

ब्राउज़र अब मास्क-स्थिति को एनिमेट नहीं करता है, जिससे प्रत्येक फ़्रेम पर एक लेआउट ट्रिगर हो जाता है। भले ही पृष्ठभूमि प्रत्येक फ्रेम पर चलती है, अनुवाद के माध्यम से यह किसी लेआउट या पेंट को ट्रिगर नहीं करता है। आप देख सकते हैं कि केवल दो बार ही पेंट होते हैं, प्रति मिनट 1,000 से नीचे।

चील-दृष्टि वाले दर्शकों ने एक समस्या देखी होगी। यदि आपको याद हो, तो पृष्ठभूमि की ऊंचाई और चौड़ाई व्यूपोर्ट को भर देती है। पृष्ठभूमि को 24px तक बाएँ और ऊपर स्थानांतरित करने से हमारे पास व्यूपोर्ट में यह खाली जगह रह जाती है।

इसे हल करना कंटेनर की चौड़ाई और ऊंचाई में मास्क का आकार जोड़ने जितना आसान है:

.background-mask {
    --mask-size: 24px;

    width: calc(100%   var(--mask-size));
    height: calc(100%   var(--mask-size));
}

आइए फ़ायरफ़ॉक्स में फिर से एक नज़र डालें:

यह एक आदर्श समाधान नहीं हो सकता है, लेकिन एक मज़ेदार धुआं और दर्पण सीएसएस ट्रिक को अपनाना हमेशा थोड़ा संतोषजनक होता है।