डोम

Question

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

मुझे किसी दिए गए समय पर 0-100 टेबल पंक्तियों से कहीं भी जोड़ने की आवश्यकता है (यह वास्तव में अधिक है, लेकिन मैं 100 से अधिक कुछ भी पेजिंग कर रहा हूं)।

अभी मैं डोम के लिए व्यक्तिगत रूप से प्रत्येक तालिका पंक्ति जोड़कर कर रहा हूँ ...

loop { 
    ..build html str... 
    $("#myTable").append(row); 
} 

तो मैं उन सभी को एक

$("#myTable tr").fadeIn(); 

में फीका नीचे दिए कुछ यहाँ पर विचार कर रहे हैं। ..

1) मैं प्रत्येक व्यक्तिगत तालिका पंक्ति में डेटा बाध्य कर रहा हूं, यही कारण है कि मैंने पहली पंक्ति में व्यक्तिगत पंक्तियों को जोड़ने के लिए एक बड़े पैमाने पर संलग्न करने से स्विच किया।

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

(संपादित करें) 3) मुझे छोटे हिस्सा/पुनरावर्ती तरीके से इस आ के लिए एक प्रमुख कारण मैं प्रत्येक पंक्ति के लिए विशिष्ट डेटा के लिए बाध्य करने की जरूरत है। क्या मैं अपना डेटा गलत बाध्य कर रहा हूं? क्या इस डेटा को अपने संबंधित tr पर बाध्य करने से ट्रैक रखने का कोई बेहतर तरीका है?

---

इसे लागू करने के लिए बेहतर है बड़े हिस्से या पुनरावर्ती कार्यों में छोटे मात्रा में प्रभावित करता है/डोम जोड़तोड़?

क्या ऐसी स्थितियां हैं जहां यह एक या दूसरे को बेहतर करना बेहतर है? यदि हां, तो उचित विधि चुनने के लिए संकेतक क्या हैं?

Answer 1

इस post by John Resig पर एक नज़र डालें, यह डीओएम में बड़े परिवर्धन करते समय दस्तावेज़फ्रेगमेंट्स का उपयोग करने का लाभ बताता है।

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

इसके अलावा, पर $("#myTable") प्रत्येक यात्रा वास्तव में अनुशंसित नहीं है कर रही है - यह पाश से पहले एक बार करते हैं।

Answer 2

मुझे संदेह है कि आपकी प्रदर्शन समस्याएं हैं क्योंकि आप अपने लूप में कई बार डोम को संशोधित कर रहे हैं।

इसके बजाय, अपनी सभी पंक्तियों को प्राप्त करने के बाद इसे संशोधित करने का प्रयास करें। ब्राउजर आंतरिक HTML प्रतिस्थापन पर वास्तव में अच्छे हैं।

$("#myTable").html("all the rows dom here"); 

नोट करें कि आपको सही स्थान पर डोम प्राप्त करने के लिए उपयोग करने के लिए सटीक चयनकर्ता के साथ खेलना पड़ सकता है। लेकिन मुख्य विचार आंतरिक HTML का उपयोग करता है, और जितना संभव हो सके इसे कम से कम उपयोग करें।