1. घर
  2. सवाल और जवाब
  3. insertAdjententHTML को आंतरिक HTML से इतना तेज़ कैसे किया जाता है?

insertAdjententHTML को आंतरिक HTML से इतना तेज़ कैसे किया जाता है?

2011-09-28 15 views
6

About a month ago, फ़ायरफ़ॉक्स 8 ने insertAdjacentHTML विधि लागू की, जिसे आईई 4 में आंतरिक HTML के साथ जोड़ा गया था। this बेंचमार्क के अनुसार, सम्मिलित करेंएडजेसेंट एचटीएमएल आमतौर पर आंतरिक HTML से तीव्रता का क्रम है।insertAdjententHTML को आंतरिक HTML से इतना तेज़ कैसे किया जाता है?

मुझे लगता है कि दोनों एक ही HTML पार्सर को कॉल करते हैं, तो नाटकीय अंतर क्यों है? insertAdjacentHTML एक साधारण विधि कॉल है, जबकि आंतरिक HTML एक गेटर/सेटर है और इसके लिए शायद थोड़ा अधिक ओवरहेड है, लेकिन मैं कभी भी इतना कल्पना नहीं करता।

स्रोत

2011-09-28 Peter C

+0

ध्यान दें कि 'appendChild' का उपयोग करके दोनों की तुलना में बहुत तेज है। शायद क्योंकि वहां कोई पार्सर की आवश्यकता नहीं है। 'appendChild' की तुलना में 'insertAdjacentHTML' और' innerHTML' 'के बीच का अंतर महत्वहीन लगता है। हालांकि, अगर आपको HTML स्ट्रिंग को पार्स करने की आवश्यकता है, तो 'appendChild' बहुत मदद नहीं करेगा। यहां एक विस्तृत JSperf है: http://jsperf.com/insertadjacenthtml-perf/28 – oriadam

उत्तर

10

work.innerHTML += "<span>test</span>";work.innerHTML = work.innerHTML + "<span>test</span>"; के बराबर है, यानि कि हर बार इसे चलाता यह work के सभी मौजूदा सामग्री serialise और फिर बहुत, साथ ही अतिरिक्त अवधि Reparse गया है।

work.insertAdjacentHTML("BeforeEnd", "<span>test</span>"); प्रत्येक बार केवल एक अवधि को पार्स कर रहा है और फिर छोटे दस्तावेज़ खंड को डीओएम से जोड़ रहा है।

स्रोत

2011-09-28 23:28:33 Alohci

+0

मुझे आशा है कि एक अच्छा ब्राउज़र 'work.innerHTML + = " परीक्षण" को' आंतरिक HTML 'में जोड़ने के लिए अनुकूलित करेगा, बस आधुनिक की तरह ब्राउज़र स्ट्रिंग concatenation अनुकूलित करें। हालांकि मैं गलत हो सकता था, लेकिन यह आश्चर्यजनक होगा कि ब्राउज़र विक्रेताओं में से कोई भी इस बारे में सोचा नहीं था। –

+2

यह इतना आसान नहीं है। धारावाहिक/पार्स चक्र में कई दुष्प्रभाव होते हैं, जैसे कि कुछ नोड गुणों को रीसेट करना और गतिशील रूप से संलग्न ईवेंट हैंडलर छोड़ना। अनुकूलन करने के लिए उनको दोहराने की आवश्यकता होगी। ब्राउज़र निर्माताओं के पास बेहतर काम करना है। 'Element.innerHTML + = ... 'एक एंटी-पैटर्न है जो जेएस कोड में टालना आसान है। बस यह मत करो। – Alohci

+0

+1 समझ में आता है। मैं 'e.innerHTML + = ... 'के साथ असहमत हूं हालांकि एक एंटीपाटरन है। अजाक्स से जुड़े कुछ वैध उपयोग हैं और मुझे नहीं लगता कि यह कहीं और हानिकारक है (धीमा होने के अलावा) कहीं और। –

1

innerHTML सेटर को नए जोड़ने से पहले सभी मौजूदा बाल नोड्स को हटाना होगा।

पता नहीं है कि यह एकमात्र कारण है, लेकिन यह निश्चित रूप से एक कारक है।

स्रोत

2011-09-28 22:23:44 user123444555621

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^