Reflow और repaint में क्या अंतर है?

Question

मैं रिफ्लो + रिपेंट के बीच के अंतर पर थोड़ा अस्पष्ट हूं (यदि कोई अंतर है तो)

Reflow जैसे लगता है कि विभिन्न DOM तत्वों की स्थिति बदल सकती है, जहाँ repaint सिर्फ एक नई वस्तु प्रदान कर रहा है। एग रिफ्लो तब होता है जब कोई तत्व निकालता है और उसका रंग बदलते समय पुनरावृत्ति होती है।

क्या ये सच है?

Answer 1

यह पोस्ट रिफ्लो बनाम दमनकारी प्रदर्शन मुद्दों को कवर करने के लिए लगता है

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

परिभाषाओं के अनुसार, उस पोस्ट से:

एक पुनरावृत्ति तब होती है जब परिवर्तन एक तत्व त्वचा के लिए किए जाते हैं जो नेत्रहीन रूप से बदलते हैं, लेकिन इसके लेआउट को प्रभावित नहीं करते हैं।

इस के उदाहरण में शामिल outline, visibility, background, या color। ओपेरा के अनुसार, रिपेंट महंगा है क्योंकि ब्राउज़र को DOM ट्री में अन्य सभी नोड्स की दृश्यता को सत्यापित करना होगा।

एक reflow प्रदर्शन के लिए और भी अधिक महत्वपूर्ण है क्योंकि इसमें परिवर्तन शामिल हैं जो पृष्ठ के एक हिस्से (या पूरे पृष्ठ) के लेआउट को प्रभावित करते हैं।

उदाहरण जो कारण रीफ़्लो में शामिल हैं: जोड़ने या सामग्री को हटाने, स्पष्ट या परोक्ष बदलते width, height, font-family, font-sizeऔर अधिक।

Http://csstriggers.com पर जानें कि कौन से सीएसएस-प्रॉपर्टीज इम्प्रूवमेंट रिपीट और रिव्यू करते हैं

Answer 2

यहाँ एक और शानदार पोस्ट है: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

एक रिपेंट, या रीड्रा, सभी तत्वों के माध्यम से जाता है और उनकी दृश्यता, रंग, रूपरेखा और अन्य दृश्य शैली गुणों को निर्धारित करता है, फिर यह स्क्रीन के प्रासंगिक भागों को अपडेट करता है।

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

यह भी पेश किया गया है कि रिफ्लो कब होता है और रिफ्लो को कैसे कम किया जाए।

Answer 3

मेरी राय में, दमन केवल DOM को ही प्रभावित करता है, लेकिन reflow पूरे पृष्ठ को प्रभावित करता है।

रेपेंट तब होता है जब कुछ परिवर्तन होते हैं जो केवल उसकी त्वचा की शैली, जैसे कि रंग और दृश्यता।

जब डॉम का पेज अपना लेआउट बदलता है तो रिफ़्लो होता है।

हाल ही में मैंने पाया कि एक साइट खोज सकती है कि कौन सी विशेषता दमन या रिफ्लो को ट्रिगर करेगी। http://csstriggers.com/

Answer 4

DOM लेआउट में बदलाव होने पर Reflow होता है। Reflow बहुत महंगा कम्प्यूटेशनल रूप से है क्योंकि पेज तत्वों के आयाम और पदों को फिर से गणना की जानी चाहिए, फिर स्क्रीन को फिर से रंग दिया जाएगा ।

एक ऐसी चीज का उदाहरण जो रिफ्लेक्स का कारण बनेगी

for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';

document.body.appendChild(newEle);
}

उपरोक्त कोड बहुत ही अकुशल है, जिसके कारण प्रत्येक नए पैरा तत्व के लिए 100 रिफ्लो प्रक्रियाएं हैं।

आप उपयोग करके इस कम्प्यूटेशनल तनावपूर्ण प्रक्रिया को कम कर सकते हैं .createDocumentFragment()

const docFrag = document.createDocumentFragment();

 for (let i = 1; i <= 100; i++ {
    const newEle = document.createElement('p');
    newEle.textContent = 'newly created paragraph element';

    docFrag.appendChild(newEle);
    }

document.body.appendChild(docFrag);

उपरोक्त कोड अब 100 नए पैराग्राफ तत्वों के निर्माण के लिए केवल reflow प्रक्रिया 1x का उपयोग करेगा।

मॉनीटर पर रिपेंट केवल पिक्सल के बदलने का है, जबकि कर लगाने के दौरान यह दो बुराइयों से कम है, क्योंकि रिफ्लो में इसकी प्रक्रिया में एक रिपेंट शामिल है।

Answer 5

महान व्याख्या जो मुझे यहां मिली ।

• Reflow: प्रत्येक दृश्य तत्व (स्थिति और आकार) के लेआउट की गणना करें।
• Repaint: स्क्रीन को पिक्सेल प्रदान करता है।