jQuery मौजूदा एचडीएमएल बनाम मौजूदा तत्व को जोड़कर बनाम

Question

मेरे पास एक स्ट्रिंग big_html है और मैं इसे कुछ div में जोड़ना चाहता हूं। मैंने निम्नलिखित में एक प्रदर्शन अंतर देखा है:

$('#some-div').append(big_html); 
// takes about 100 ms 

//create it first 
var append_objs = $(big_html); 
$('#some-div').append(append_objs); 
//takes about 150 ms 

क्या कोई जानता है कि ऐसा क्यों होता है? आपके समय के लिए शुक्रिया।

संपादित करें: मैं उस पृष्ठ को जोड़ने की कोशिश कर रहा हूं जो मैं पृष्ठ में जोड़ रहा हूं। मैंने

var added = $(big_html).appendTo('#some-div'); 
//150 ms 

भी ऐसा करने का कोई प्रभावी तरीका है?

Answer 1

दूसरे मामले में, jQuery ने ब्राउज़र को एक दस्तावेज़ खंड बनाया है और फिर ब्राउज़र में पार्स के लिए यह HTML को सामान देता है। फिर, जब आप इसे अपने पृष्ठ पर जोड़ते हैं तो आपने इसे फिर से डोम में हेरफेर किया है।

इस प्रकार दूसरा संस्करण बस पहले की तुलना में अधिक काम कर रहा है।

मैं आपको (और सभी रुचि रखने वाले) को प्रोत्साहित करने के लिए jQuery के गैर-मिनीफाइड संस्करण को रखने के लिए प्रोत्साहित करता हूं। यह केवल कोड के माध्यम से पढ़ने के लिए प्रबुद्ध है।

के बाद "सामग्री" प्राप्त करने के लिए इसे डीओएम सॉर्ट-इन में जोड़ा गया है, यह इस बात पर निर्भर करता है कि यह क्या है। चूंकि सामग्री संलग्न किया जा रहा है, तो आप तरह-का लक्ष्य के अंतिम तत्व याद करके बंद शुरू कर दिया है:

var last = $('#some_div > *:last'); 
$('#some_div').append(big_html_string); 
var newStuff = last.nextAll(); 

लक्ष्य div खाली शुरू हो सकता है, तो आप उस के लिए भी जांच करने की आवश्यकता होगी :

var newStuff = last.length ? last.nextAll() : $('#some_div > *');