यदि मेरे पास पृष्ठ पर बहुत सारे डोम हैं और मैंने उन्हें सभी को प्रदर्शित करने के लिए सेट किया है: कोई भी नहीं, ब्राउज़र अभी भी तेज़ी से प्रतिक्रिया करता है (स्क्रॉलिंग तेज़ है, पेज स्नैपी महसूस करता है)।बहुत सारे डोम। छुपा बनाम प्रदर्शित कोई भी
हालांकि, यदि मैं दृश्यता: तत्वों को छुपाता हूं, ब्राउज़र धीमा है जैसे कि वे सभी स्क्रीन पर खींचे गए थे।
क्या कोई विस्तार से समझा सकता है, ऐसा क्यों है?
खैर एक तरह से चेक, वे तैयार कर रहे हैं (लेकिन वास्तव में नहीं): ब्राउज़र, उनके लिए अंतरिक्ष रहता है तो यह आइटम पर विचार करना चाहिए जब बाहर से दिखाई दे लोगों को बिछाने।
MDC visibility:hidden देखें:
बॉक्स अदृश्य है (पूरी तरह से पारदर्शी, कुछ भी नहीं ली गई है), लेकिन अभी भी लेआउट प्रभावित करता है। यदि उनके पास दृश्यता है तो तत्व के वंशज दिखाई देंगे: दृश्यमान (यह IE में संस्करण 7 तक काम नहीं करता है)।
यदि आप इसके बजाय display: none निर्दिष्ट करते हैं, ब्राउज़र केवल दृश्यमान लोगों की देखभाल और लेआउट के रूप में निर्दिष्ट करता है। इसे दूसरों को बिल्कुल ध्यान में रखना नहीं है।
आपके दृश्यमान/अदृश्य अनुपात और तत्वों की संख्या के आधार पर, इससे कोई फर्क पड़ सकता है।
अभी तक का सबसे अच्छा सादा अंग्रेजी स्पष्टीकरण। – jball
visibility:hidden के साथ वे सभी स्क्रीन पर खींचे जाते हैं, लेकिन वे उपयोगकर्ता द्वारा दिखाई नहीं दे रहे हैं। इसके बजाय, display:none के साथ वे
मैं स्पष्ट करता हूं, 'दृश्यता: छुपा' के लिए उन्हें लेआउट में प्रस्तुत किया जाता है लेकिन ** ** ** स्क्रीन पर खींचा नहीं जाता है। – jball
"ब्राउज़र धीमा है जैसे कि वे सभी स्क्रीन पर खींचे गए थे।"
मुझे लगता है कि यह धीमा है क्योंकि टैग अभी भी प्रस्तुत किया गया है, लेकिन स्क्रीन पर नहीं देखा जाता है।
बाहर this
visibility: hidden के साथ उनके आकारों की गणना की जानी चाहिए ताकि उनके लिए उचित मात्रा में स्थान आरक्षित किया जा सके। वे प्रभावी रूप से अभी भी खींचे गए हैं।
क्योंकि display: none वास्तव में डोम से तत्वों को हटा देता है। visibility: hidden केवल उन्हें अदृश्य बनाता है, लेकिन वे अभी भी वहां हैं।
आप अंतर देख सकते हैं क्योंकि display: none फॉर्म इनपुट फ़ील्ड को सबमिट करने पर फ़ॉर्म में शामिल नहीं किया जाएगा; इनपुट फ़ील्ड्स जिनमें केवल visibility: hidden सेट है, अभी भी वहां होंगे। खैर, कम से कम, यह मेरा अनुभव है - अन्य ब्राउज़र भिन्न व्यवहार कर सकते हैं।
शैलियों को डीओएम को प्रभावित नहीं करना चाहिए। यहां वर्णित व्यवहार HTML 4.01 spec में "17.13.2 सफल नियंत्रण" खंड का खंडन करता है। – CurtainDog
प्रदर्शन: कोई नहीं; किसी तत्व के डीओएम प्रतिनिधित्व को प्रभावित नहीं करता है या किसी भी तरह से नहीं हटाता है। – csuwldcat
मैंने सत्यापित किया है कि कुछ ब्राउज़रों के लिए, 'प्रदर्शन प्रदर्शित करें: कोई भी गतिशील रूप से * करता है * डीओएम से तत्वों को हटा देता है, भले ही स्पेक कहता है। यह स्पष्ट रूप से एक प्रदर्शन अनुकूलन है। मैंने इसे कम से कम सफारी 6.2.2 में देखा है। उपरोक्त माता-पिता। – Yitz
display:none का उपयोग करके, ब्राउज़र इन तत्वों को प्रारंभ नहीं करता है और न ही सामग्री प्रस्तुत करता है। यह visibility:hidden का उपयोग करते समय ऐसा नहीं है, जो इन तत्वों को प्रारंभ करता है लेकिन केवल उन्हें छुपाता है।
एक पेंटिंग की कल्पना करें।
आपके पास एक सफेद पृष्ठभूमि है और एक घंटे के दौरान बहुत से विवरण के साथ एक सेब खींचना शुरू करें और फिर आप पूरी तरह से सफेद रंग के दूसरे कोट के साथ इसे कवर करें। यह visibility है।
display:none इसे शुरुआत से नहीं खींच रहा है। बेशक यह पहले लोड पर तेज है। जब आप इसे block (या inline आदि) का उपयोग करने जा रहे हैं वापस आप चित्र ड्राइंग लेकिन दृश्यता का उपयोग कर ब्राउज़र सिर्फ रंग के अंतिम कोट खरोंच है शुरू कर दिया है और यह बताया गया है:
जब आप display:none हालांकि उपयोग कर रहे हैं वहाँ कमियां हैं वापस। तो इस मामले में visibility तेज है।
लेकिन एक बात याद है जब आप visibility:hidden का उपयोग कर रहे तत्व प्रवाह में अपनी स्थिति को बरकरार रखे हुए है ताकि इसके चारों ओर तत्वों मानने नहीं होंगे।
यदि आप तकनीकी स्पष्टीकरण चाहते हैं तो David Baron's talk देखें।
यह काफी दिलचस्प है। तो संक्षेप में visibility: hidden तकनीकी रूप से opacity: 0 जैसा ही है?
मैं कोई ब्राउज़र निर्माता नहीं हूं, लेकिन यदि दृश्यमान छुपा हुआ तत्वों को प्रस्तुत या चित्रित नहीं किया गया है, लेकिन तत्व के आयामों के साथ एक पारदर्शी वर्ग के रूप में चित्रित किया गया है, तो यह एक बड़ा प्रदर्शन लाभ नहीं होगा? कम से कम परिस्थितियों में जहां आयाम ज्ञात थे।
संभावित डुप्लिकेट [क्या अस्पष्टता: 0 दृश्यता के समान बिल्कुल प्रभावशाली है: छुपा] (http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as- दृश्यताबद्ध) – givanse