जब स्मृति में डीओएम में कुछ जोड़ा जाता है, तो क्या इसका कारण ब्राउज़र को रीफ्लो करता है?

Question

जब कुछ स्मृति में डोम में जोड़ा जाता है, कि एक ब्राउज़र रीफ़्लो करता है? या यह तभी होता है जब स्क्रीन पर पिक्सल को बदलने के लिए कहा जाता है कि रिफ्लो होता है? उदाहरण के लिए:

केस 1: Img तत्वों एक अलग सरणी में रखा और फिर जोड़ दिए जाते हैं डोम

रहे हैं: Img तत्वों एक समय

var parentDiv = $('#imgHolder'); 
var imgArray = []; // Array of img paths populated in another function 

$.each(imgArray, function() 
{ 
    parentDiv.append(createImgEle(this)); // createImgEle() // returns an <img> with the right src 
} 

केस 2 में डोम एक के साथ जोड़ दिया

var parentDiv = $('#imgHolder'); var imgArray = []; // Array of img paths populated in another function var tempArray = []; // Holds the img elements until its fully populated $.each(imgArray, function() { tempArray.push(createImgEle(this)); } parentDiv.append(tempArray); 

केस 3: या तो मामले में 1 या 2 लेकिन डिफ़ॉल्ट रूप से, parentDiv display:none; करने के लिए सेट और बाद दिखाई किया जाता है प्रत्येक पाश किया जाता है।

असल में, मैं क्या जानना चाहता हूं, ब्राउज़र केवल स्क्रीन के पिक्सल को बदलने के लिए कहा जाने पर रीफ्लो करना प्रारंभ होता है?

Btw, कोड केवल उदाहरण उद्देश्यों के लिए है और न उत्पादन में तो किसी भी तर्क त्रुटियों के लिए मुझे स्लैम नहीं है। किसी भी सलाह के लिए धन्यवाद।

Answer 1

असल में, जो मैं जानना चाहता हूं, क्या ब्राउज़र केवल तभी शुरू होता है जब स्क्रीन के पिक्सल को बदलने के लिए कहा जाता है?

नहीं, ब्राउज़र बदलता है जब ब्राउज़र बदलता है। उसके बाद, यह पेंट करेगा (स्क्रीन पर पिक्सल को बदलने के लिए बताएं)।

विवरण के लिए, this dev.opera.com article पर और When does reflow happen in a DOM environment? पर एक नज़र डालें।

संक्षेप में: बाद में डोम परिवर्तन के लिए पाठ्यक्रम अनुकूलन के नहीं है, उदाहरण के लिए आप एक पाश में तत्वों की एक सरणी सम्मिलित हैं। मैं आपके मामलों 1 और 2 को ध्यान देने योग्य नहीं होने की अपेक्षा करता हूं।

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