स्टाइल की मदद से बेहतर परफ़ॉर्मेंस

स्टाइल, कंपोज़ के लेआउट और ड्रॉइंग फ़ेज़ में काम करती हैं. इससे लैंबडा पर आधारित मॉडिफ़ायर बनाने की ज़रूरत नहीं पड़ती, क्योंकि स्टाइल हमेशा कंपोज़िशन फ़ेज़ को स्किप कर देती है.

Compose और Styles के फ़ेज़ और वे कहां काम करते हैं
पहली इमेज. कंपोज़ करने की प्रोसेस के चरण और स्टाइल कहां लागू होती हैं.

मॉडिफ़ायर की तुलना में परफ़ॉर्मेंस में सुधार, तीन मुख्य ऑप्टिमाइज़ेशन की वजह से होता है:

  • फ़ेज़ में बदलाव: स्टाइल अक्सर ड्रॉ फ़ेज़ को टारगेट करती हैं. किसी वैल्यू में बदलाव होने पर, Compose सिर्फ़ उस फ़ेज़ को अमान्य करता है जिस पर असर पड़ा है.जैसे, रीड्रॉ. इसके बजाय, यह पूरे रीकंपोज़िशन या रिलआउट को ट्रिगर नहीं करता.
  • लेज़ी ऐलोकेशन: स्टाइल, ऐनिमेशन के संसाधन को तब तक ऐलोकेट नहीं करती हैं, जब तक कि ऐनिमेशन शुरू नहीं हो जाता. इससे शुरुआती कंपोज़िशन के दौरान किए जाने वाले काम को कम किया जा सकता है.
  • ऑब्जेक्ट का ओवरहेड कम हो जाता है: चेन किए गए मॉडिफ़ायर, हर प्रॉपर्टी (जैसे, पैडिंग, बॉर्डर) के लिए एक ऑब्जेक्ट असाइन करते हैं. स्टाइल, कई प्रॉपर्टी लागू करने के लिए एक ही लैम्डा का इस्तेमाल करती हैं. इससे मेमोरी का इस्तेमाल काफ़ी कम हो जाता है. अगर किसी थीम में स्टाइल तय की गई है, तो उस थीम का इस्तेमाल करने वाले सभी कॉम्पोनेंट के साथ उस लैम्डा को शेयर किया जाता है.

यहां दी गई टेबल में, Styles के Compose 1.11.0-alpha06 के लिए, परफ़ॉर्मेंस बेंचमार्क के उदाहरण के तौर पर नतीजे दिखाए गए हैं. इनकी तुलना, Styles के बिना Compose में लागू किए गए नतीजे से की गई है.

basic_box_border_change टेस्ट से पता चलता है कि स्टाइल सिस्टम, प्रॉपर्टी अपडेट के दौरान एक से ज़्यादा मॉडिफ़ायर ऑब्जेक्ट के असाइनमेंट से बचने में कितना बेहतर है. इससे असाइनमेंट में ~77% और समय में ~59% की कमी आई.

टेस्ट का तरीका

ब्यौरा

समय में बदलाव

बदलाव

basic_box_border_change

यह विकल्प, Box के बॉर्डर के रंग को टॉगल करता है, ताकि अपडेट की परफ़ॉर्मेंस को मेज़र किया जा सके.

-59.91%

-77.22%

input_state_basic_box

यह कुकी, स्टाइल के आधार पर होवर/फ़ोकस/प्रेस की स्थितियों की तुलना, मैन्युअल इंटरैक्शन की स्थिति के कलेक्शन से करती है.

-5.24%

-14.72%

basic_box

यह पांच चेन वाले मॉडिफ़ायर के साथ Box की शुरुआती कंपोज़िशन और लेआउट को मेज़र करता है.

-4.78%

-6.60%

basic_text

यह कोड, हार्डकोड की गई स्ट्रिंग के साथ पांच BasicText कॉम्पोनेंट रेंडर करता है.

+0.62%

+2.41%

basic_text_provided_color

इस कुकी का काम, स्टाइल के ज़रिए टेक्स्ट का रंग सेट करने और CompositionLocalProvider का इस्तेमाल करने के बीच तुलना करना है.

+5.86%

+9.82%