गुणों को बदलते समय डोम तत्व का विलंब प्रतिपादन

Question

मैं वर्तमान में कई बार डोम तत्वों पर गुणों को अद्यतन करते समय प्रदर्शन समस्या में चला गया हूं। ऐसा लगता है कि हर बार जब मैं एक संपत्ति बदलता हूं तो डोम तत्व पुनः प्रस्तुत किया जाता है। क्या वैसे भी मैं तत्वों के प्रतिपादन में देरी कर सकता हूं जब तक कि मेरे सभी अपडेट नहीं हुए हैं? यह आईई 7 & 8 की तुलना में एफएफ 3 & 3.5 में बहुत धीमा प्रतीत होता है जो कि मुझे अपेक्षित था।

मैं जो कर रहा हूं उसका एक उदाहरण नीचे है।

var t; 

for (var i = 0; i < tiles.length; i++) { 
    t = tiles[i]; 
    t.width = '100'; 
    t.height = '100'; 
} 

मुद्दा यह है कि "टाइल्स" में आइटमों की संख्या 100 डोम तत्वों तक हो सकती है। जहां वह प्रदर्शन मुद्दे वास्तव में दिखाते हैं।

Answer 1

@Crimson से सहमत हैं लेकिन मुझे लगता है कि आपके द्वारा अपडेट किए जा रहे सभी तत्वों के अभिभावक को छिपाना बेहतर होगा और यदि उनके पास कोई विशेष अभिभावक नहीं है, तो एक बनाने का प्रयास करें।

कि जिस तरह से केवल दो reflows हो जाएगा, एक आप टाइल कंटेनर छुपाने के लिए, और अन्य जब आप तत्व हेरफेर समाप्त करने और आप इसे फिर से दिखाने के लिए जब।

Answer 2

डिस्प्ले घोषित करें: परिवर्तन करने और प्रदर्शित करने से पहले प्रत्येक टाइल के लिए कोई भी नहीं: सभी परिवर्तन किए जाने पर ब्लॉक करें।

Answer 3

फ्लैश से बचने के लिए आप माता-पिता को अपने आप के क्लोन से बदल सकते हैं और फिर दस्तावेज़ के बाहर मूल मूल पर काम कर सकते हैं। तब, जब आप पूरा कर लें, तो आप क्लोन मूल के साथ बदलें सकता है:

var parent = /* define parent here */; 
var clone = parent.cloneNode(true); 

parent.parentNode.replaceChild(clone, parent); 

/* Do stuff with parent and its childNodes... */ 

clone.parentNode.replaceChild(parent, clone); 

Answer 4

यह एक बहुत एफएफ 3 & IE 7 से 3.5 & 8 जो मैं क्या उम्मीद के खिलाफ जाता है में धीमी हो रहा है।

वर्तमान में एफएफ सीधे संपत्ति परिवर्तन पर लेआउट को फिर से समझता है। आईई इंतजार करता है जब तक कि इसे पृष्ठ को फिर से नहीं लेना पड़ता है, या आप ऑफ़सेट विड्थ जैसी संपत्ति तक पहुंचते हैं जिसे नए लेआउट को जानने की आवश्यकता होती है। यह हमेशा सही ढंग से काम करने के लिए प्रयोग नहीं किया जाता था।

सीएमएस का दृष्टिकोण अच्छा है। यदि आपके सभी टाइल्स उदाहरण के समान आकार के हैं, तो एक तेज़ तरीका भी है (जो टाइलों के सामान्य माता-पिता नहीं होने पर भी काम करता है)। बस उन सब को एक वर्ग दे और उन्हें एक बार सीएसएस का उपयोग करने में स्विच:

body.tiles100 .tile { width: 100px; height: 100px; } 

document.body.className= 'tiles100'; 

आप पहले से संभव आकार की एक पूर्वनिर्धारित चयन नहीं जानते हैं, तो आप स्टाइलशीट नियम गतिशील लिखने के लिए होगा, के माध्यम से document.style शीट्स सूची। यह दर्द का एक सा है, हालांकि, क्योंकि आईई में स्क्रिप्टिंग इंटरफ़ेस अन्य ब्राउज़रों द्वारा उपयोग किए जाने वाले डोम मानक से काफी मेल नहीं खाता है। फिर।