पॉलिमर 1.0 डोम-अगर बनाम

Question

छिपा https://www.polymer-project.org/1.0/docs/api/dom-if

से अगर falsey हो जाता है, पर कटे सामग्री छिपा जब जाता है, लेकिन डोम से नहीं हटाया। जब बाद में सच्चाई बन जाती है, तो सामग्री को फिर से दिखाया जाता है। इस दृष्टिकोण का उपयोग इसके अनुकूल प्रदर्शन विशेषताओं के कारण किया जाता है: टेम्पलेट सामग्री बनाने की कीमत केवल एक बार और आलसी भुगतान की जाती है।

मुझे लगा कि यह hidden विशेषता के व्यवहार था, इस प्रकार hidden सस्ता की तुलना में dom-if जा रहा है के बाद से टेम्पलेट hidden साथ restamped नहीं होगा। चूंकि 'कोई रेस्टैम्प' डिफ़ॉल्ट व्यवहार dom-if है,और hidden और प्रदर्शन के लिए hidden के बीच अंतर क्या है? पॉलिमर सर्वोत्तम प्रथाओं नोट करता है कि hidden सस्ता है।

Answer 1

इसके बारे में मेरे समझ के साथ कि dom-if जब तक अभिव्यक्ति truthy हो जाता है टिकट नहीं करता है, लेकिन ऐसा करने के बाद यह [hidden] बहुत पसंद करता है व्यवहार करता है। इस तरह dom-if एक निराशावादी [hidden] है जो यथासंभव लंबे समय तक मुद्रांकन को रोकता है।

यह आलसी लोडिंग दृष्टिकोण कुछ स्थितियों में अनुकूल है जहां टेम्पलेट मुद्रांकन बहुत संसाधन गहन होगा। उदाहरण के लिए यदि टेम्पलेट कई कस्टम घटकों के साथ बहुत बड़ा था जिसे प्रारंभ करना है। यदि आपने अभी hidden विशेषता का उपयोग किया है तो आप उस सभी डोम को बनाने के प्रदर्शन लागत का भुगतान करेंगे, इसके लिए केवल बाद में दिखाई नहीं दे रहा है।

इस तरह के छिपने या कुछ पाठ दिखा रहा है, एक या दो div, आदि hidden विशेषता तेजी से हो सकता है के रूप में सरल मामलों के लिए, क्योंकि उन तत्वों बनाने और फिर उन्हें छिपाने एक <template> उदाहरण बनाकर धारण करने के लिए की तुलना में कम हो सकता है की लागत आपका कोड, पॉलिमर श्रोताओं को सच्चाई के लिए अभिव्यक्ति की निगरानी करने के लिए स्थापित करता है, फिर, जब यह सच हो जाता है, टेम्पलेट को मुद्रित करने के लिए सभी ओवरहेड, बाध्यकारी अभिव्यक्तियों के लिए इसे पार्स करना आदि। यह उन ब्राउज़रों के लिए विशेष रूप से सच है जहां <template> समर्थन पॉलीफ़िल्ड है।

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

Answer 2

display सीएसएस संपत्ति के साथ छुपा हस्तक्षेप और इसलिए dom-if एक बेहतर विकल्प है।

यदि आप

:host {display: block;} 

है घटकों मेजबान तत्व पर hidden की स्थापना इसे छिपाने नहीं होंगे। तुम भी

[hidden] { display: none !important;} 

की तरह एक वैश्विक शैली को जोड़ने के लिए यह मज़बूती से काम करने के लिए (और यह IE9 में काम करते हैं जो hidden AFAIR का समर्थन नहीं करता बनाने के लिए) की आवश्यकता होगी।