jQuery को खाली करना() या प्रतिस्थापित करें() फ़ंक्शन जब बड़े डोम तत्वों के साथ काम करते हैं

Question

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

यहाँ अपने आवेदन में पर चला जाता है के टूटने है:

1. उपयोगकर्ता एक बटन क्लिक करता है
2. सर्वर एक डेटा-तालिका के रूप में चित्रों की सूची को पुन: प्राप्त
3. तालिका की प्रत्येक पंक्ति 8 डेटा-कोशिकाओं है कि बदले में हर एक हाइपरलिंक
   • उपयोगकर्ता द्वारा प्रत्येक अनुरोध अधिकतम 50 पंक्तियां हो सकते हैं शामिल हैं (मैं इस नंबर बदल सकते हैं यदि आवश्यकता हुई)
   • इसका मतलब है कि तालिका 800 व्यक्तिगत डीओएम तत्वों के ऊपर है
   • मेरा विश्लेषण दिखाता है कि jQuery("#dataTable").empty() और jQuery("#dataTable).replaceWith(tableCloneObject) मेरे समग्र प्रसंस्करण समय का 9 7% लेते हैं और इसे पूरा करने के लिए औसतन 4-6 सेकंड लेते हैं।/प्रतिस्थापित

मैं उपर्युक्त jQuery कार्यों जब बड़े पैमाने पर डोम तत्वों को हटाया जा करने की जरूरत है के साथ काम कर के दोनों तेजी लाने के लिए एक रास्ता तलाश कर रहा हूँ। मुझे उम्मीद है कि मेरी व्याख्या मदद करता है।

Answer 1

jQuery empty() अपनी मेज पर एक लंबे समय ले रही है, क्योंकि यह मेमोरी लीक को रोकने के हित में खाली कर दिया तत्व की सामग्री के साथ काम का एक सही मायने में स्मारकीय राशि करता है। आपको लगता है कि जोखिम के साथ रह सकते हैं, तो आप तर्क शामिल छोड़ सकते हैं और सिर्फ बात यह है कि इतने तरह तालिका सामग्री से छुटकारा हो जाता है:

while (table.firstChild) 
     table.removeChild(table.firstChild); 

या

table.children().remove(); 

Answer 2

क्या आपको एक बार में सभी को दोबारा बदलना है, या आप इसे सेटटाइमआउट() पर भाग से कर सकते हैं? मुझे एहसास है कि यह शायद भाग में और भी अधिक समय लेगा, लेकिन उपयोगकर्ता के लिए एक स्पष्ट लॉक अप के बजाय कुछ घटित होने के लिए बहुत कुछ है।

Answer 3

मेरे पास हाल ही में बहुत बड़ी डेटा-टेबल थीं जो सभी डीओएम मैनिपुलेशन के कारण परिवर्तन करते समय प्रसंस्करण के एक मिनट में 15 सेकंड तक खाती थीं। मैं इसे सभी ब्राउज़रों में < 1 सेकंड तक मिला लेकिन आईई (आईई 8 में 5-10 सेकंड लगते हैं)।

मुझे पाया गया सबसे बड़ा गति लाभ डोम से काम कर रहा था, जो मेरे परिवर्तन में प्रदर्शन कर रहा था, फिर इसे वापस डोम में वापस कर रहा था (मेरे मामले में tbody)।

यहां आप कोड की दो प्रासंगिक रेखाएं देख सकते हैं, जिन्होंने मुझे बड़ा प्रदर्शन बढ़ाया (मुट्टूल का उपयोग करके, लेकिन jQuery पर पोर्ट किया जा सकता है)।

update_table : function(rows) { 
    var self = this; 
    this.body = this.body.dispose(); //<------REMOVED HERE 
    rows.each(function(row) { 
     var active = row.retrieve('active'); 
     self.options.data_classes.each(function(hide, name) { 
      if (row.retrieve(name) == true && hide == true) { 
       active = false; 
      } 
     }); 
     row.setStyle('display', (active ? '' : 'none')); 
     row.store('active', active); 
     row.inject(self.body); //<--------CHANGES TO TBODY DONE HERE 
    }) 
    this.body.inject(this.table); //<-----RE-INSERTED HERE 
    this.rows = rows; 
    this.zebra(); 
    this.cells = this._update_cells(); 
    this.fireEvent('update'); 
}, 

Answer 4

क्या मेरे लिए काम किया $("#myTable").detach() है । मुझे एक टेबल साफ़ करना पड़ा जिसमें पंक्तियों के 1000s हैं। मैंने $("#myTable").children().remove() की कोशिश की। यह $("myTable").empty() पर एक सुधार था, लेकिन अभी भी बहुत धीमी है। $("#myTable").detach() 1 सेकंड या उससे कम लेता है। एफएफ और क्रोम में ठीक काम करता है। आईई अभी भी धीमा है।