सीएसएस-इन-जेएस

'सीएसएस-इन-जेएस' एक प्रवाह है जो स्टाइल-घटकों से शुरू हुआ और जावास्क्रिप्ट के भीतर स्टाइल को परिभाषित करता है।

स्टाइल-घटक, भावना, मेंटिन, आदि।

योग्यता

1. लागू दायरा छोटा है.
   1. यदि आप सीएसएस मॉड्यूल का उपयोग करते हैं, तो आप सीएसएस का दायरा भी कम कर सकते हैं
2. घटक के समान स्थान पर परिभाषित किया गया है। (उपस्थान)
3. जावास्क्रिप्ट वेरिएबल का उपयोग किया जा सकता है।

हानि

1. रनटाइम ओवरहेड
2. आपको जेएस लाइब्रेरी फ़ाइल में सीएसएस डाउनलोड करना होगा।
   1. भावना 7.9KB है।
   2. मेंटाइन 134KB है!

बहुत बड़ा नकारात्मक पहलू

1. बार-बार सीएसएस नियम डालने से बहुत अधिक कम्प्यूटेशनल काम करना पड़ता है।
   1. भावना और सीएसएस की तुलना
   2. सीएसएस का उपयोग करते समय, प्रदर्शन में लगभग 50% की वृद्धि हुई।
2. एसएसआर का उपयोग करते समय, कई तरह की समस्याएं उत्पन्न होती हैं।
   1. यदि आप इमोशन रेपो को देखें, तो कई मुद्दे हैं
   ।

वास्तविक दुनिया के प्रदर्शन की तुलना

हमने वास्तव में उत्पादन में उपयोग किए गए कोड का उपयोग करके सीएसएस-इन-जेएस और टेलविंड की तुलना करके प्रदर्शन को मापा।

स्थापित करना

• सीएसएस-इन-जेएस मेंटाइन (भावना पर आधारित) का उपयोग करता है।
• प्रदर्शन मापन रिएक्ट डेव टूल का उपयोग करता है।
• प्रदर्शन माप लक्ष्य 30 * 5 तालिका (घटक नाम: शीटटेबल) है।

स्क्रीन

प्रयोग प्रगति

जब आप
• बटन दबाते हैं, तो उपरोक्त स्क्रीन प्रदर्शित होती है।
रिएक्ट प्रोफाइलर में रिकॉर्डिंग चालू करें और स्क्रीन रेंडरिंग रिकॉर्ड करने के लिए बटन दबाएं
शीटटेबल के रेंडरिंग समय को मापता है।
औसत प्राप्त करने के लिए कुल 5 बार प्रदर्शन करें।

प्रतिपादन समय लगभग 36% कम हो गया था।
केवल एक सेल कोड बदलने से भी प्रदर्शन में उल्लेखनीय सुधार हुआ। (बेशक, उनमें से अधिकतर कोशिकाएँ हैं)
60 हर्ट्ज मॉनिटर पर, 1 फ्रेम 16 एमएस है, लेकिन 3 फ्रेम -> 2 फ्रेम

स्थिर रूप से उत्पन्न सीएसएस का उपयोग प्रदर्शन के मामले में काफी बेहतर है।
जब तक आपको जेएस वेरिएबल्स का उपयोग करने की आवश्यकता न हो, टेलविंड का उपयोग करें।
(अतिरिक्त) एसएसआर शुरू करने के लिए, सीएसएस-इन-जेएस को छोड़ना सुविधाजनक है