जावास्क्रिप्ट दस्तावेज़ .createElement या HTML टैग

Question

मैं लेखन कोड की निम्नलिखित शैली पर उलझन में हूं। मैं जानना चाहता हूं कि दस्तावेज़ में HTML टैग डालने के लिए व्यावहारिक और कुशल विधि कौन सा है।

जावास्क्रिप्ट:

document.getElementById('demoId').innerHTML='<div>hello world and <a>click me</a> also</div>'; 

या

var itd=document.createElement('div'), 
    ita=document.createElement('a'), 
    idt=document.createTextNode('hello world'); 
    iat=document.createTextNode('click me'); 
    idn=document.createTextNode('also'); 

    ita.appendChild(iat); 
    itd.appendChild(idt); 
    itd.appendChild(ita); 
    itd.appendChild(idn) 

    docuemtn.getElementById('demoId').appendChild(itd); 

सबसे तेज और सबसे अच्छा तरीका है कौन?

Answer 1

अच्छी तरह से सोचें कि उनमें से प्रत्येक क्या कर रहा है। पहला स्ट्रिंग ले रहा है, इसे पार्स कर रहा है और फिर document.createElement, document.appendChild, आदि (या इसी तरह के तरीकों) को पार्स किए गए स्ट्रिंग से आउटपुट के आधार पर कॉल कर रहा है। दूसरा ब्राउज़र पर वर्क लोड को कम कर रहा है क्योंकि आप सीधे बता रहे हैं कि आप क्या करना चाहते हैं।

See a comparison on jsPerf

jsPerf विकल्प 1 के अनुसार लगभग 3 बार विकल्प 2 की तुलना में धीमी है।

रखरखाव विकल्प 1 के विषय पर लिखना बहुत आसान है लेकिन मुझे पुराने रूप में कॉल करें, मैं विकल्प 2 का उपयोग करना पसंद करूंगा क्योंकि यह अधिक सुरक्षित लगता है।

संपादित

कुछ परिणाम के बाद में आने लगा, भिन्न परिणाम मेरी जिज्ञासा भी खफा। मैंने अपने प्रत्येक ब्राउजर के साथ दो बार परीक्षण चलाया, यहां सभी परीक्षणों के बाद जेएसपीरफ़ के परिणामों का एक स्क्रीनशॉट है (ऑपरेशंस/सेकेंड, उच्च बेहतर है)।

तो ब्राउज़रों कि वे किस तरह दो तकनीकों को संभालने में व्यापक अंतर लगते हैं। औसतन विकल्प 2 क्रोम और सफारी के विकल्प के पक्ष में बड़े अंतर के कारण तेज़ी से प्रतीत होता है 2. मेरा निष्कर्ष यह है कि हमें केवल जो भी सबसे सहज महसूस होता है या अपने संगठन के मानकों के साथ सर्वोत्तम फिट बैठता है और चिंता न करें कि यह अधिक कुशल है।

मुख्य बात इस अभ्यास ने मुझे सिखाया है IE10 का उपयोग नहीं करने के लिए बड़े बड़े काम मैं इसके बारे में सुना है के बावजूद है।