डीओएम तत्वों को संशोधित करने और रिफ्लो को सीमित करने का सबसे प्रभावी तरीका क्या है?

Question

संभावित रूप से बड़े जेएस पुस्तकालयों के साथ एक बहुत ही गतिशील यूआई (सिंगल पेज ऐप सोचें) के साथ काम करते समय, टेम्पलेट्स, सत्यापन, AJAX, एनिमेशन आदि देखें ... कुछ रणनीतियों क्या हैं जो ब्राउज़र खर्च करने के समय को कम या कम करने में मदद करेंगे पुन: प्रवाहित?

उदाहरण के लिए, हम जानते हैं कि डीआईवी आकार परिवर्तन को पूरा करने के कई तरीके हैं लेकिन क्या ऐसी तकनीकें हैं जिन्हें टालना चाहिए (एक रिफ्लो दृष्टिकोण से) और ब्राउज़र के बीच परिणाम अलग-अलग कैसे होते हैं?

यहाँ एक ठोस उदाहरण है:

एक DIV के आकार जब खिड़की का आकार बदलने पर नियंत्रित करने के लिए 3 अलग अलग तरीकों, जो इनमें से रीफ़्लो कम करने के लिए इस्तेमाल किया जाना चाहिए का एक सरल उदाहरण को देखते हुए?

http://jsfiddle.net/xDaevax/v7ex7m6v/

//Method 1: Pure Javascript 
function resize(width, height) { 
    var target = document.getElementById("method1"); 
    target.setAttribute("style","width:" + width + "px"); 
    target.setAttribute("style", "height:" + height + "px"); 
    console.log("here"); 
} // end function 
window.onresize = function() { 
    var height = (window.innerHeight/4); 
    var width = (window.innerWidth/4); 
    console.log(height); 
    resize(height, width); 
} 
//Method #3 Jquery animate 
$(function() { 
    $(window).on("resize", function(e, data) { 
     $("#method3").animate({height: window.innerHeight/4, width: window.innerWidth/4}, 600) 
    }); 
}); 

Answer 1

यह कोशिश करते हैं और डोम तत्वों को बदलने के लिए जब भी संभव से बचने के लिए सबसे अच्छा है। कभी-कभी आप सीएसएस गुणों से चिपके हुए या सीएस ' एस का उपयोग करके, यदि आवश्यक हो, तो तत्व सभी पर भी प्रभावित नहीं होता है, बल्कि दृश्य स्थिति बस बदल जाती है। पॉल लुईस और पॉल आयरिश इस बारे में विस्तार से बताते हैं कि यह this article में क्यों है।

यह दृष्टिकोण सभी मामलों में काम नहीं करेगा क्योंकि कभी-कभी वास्तविक डीओएम तत्व को बदलने की आवश्यकता होती है, लेकिन कई एनिमेशन और ऐसे में, transform एस सर्वश्रेष्ठ प्रदर्शन लाता है।

---

अपने संचालन पुनर्प्रवाहित की आवश्यकता है, तो आप प्रभाव यह है द्वारा कम से कम कर सकते हैं:

• एक चर करने के लिए जटिल वाले सरल अपने CSS चयनकर्ता रखते हुए (और बचत डोम गहराई छोटे
• रखते हुए जावास्क्रिप्ट में)
• इनलाइन शैलियों
• लेआउट
• JavaScri बचना लिए टेबल से बचना बचना पीटी जब भी संभव हो

निकोल सुलिवान ने इस विषय पर pretty good article पोस्ट किया जो ब्राउजर रीफ्लो और पेंटेंट्स के अधिक विवरण में जाता है।

यदि आप वास्तव में डोम बदल रहे हैं, डीओएम गुण नहीं, तो छोटे से like this Stack Overflow post सुझावों के बजाय इसे बड़े हिस्सों में करना सबसे अच्छा है।

---

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

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