आंतरिक HTML

Question

पर बड़ा मूल्य सेट करते समय प्रदर्शन बढ़ाने के तरीके मैं नोड के आंतरिक HTML पर एक विशाल (200K) प्रतिक्रिया सेट करने का प्रयास कर रहा हूं। लक्ष्य इंटरनेट एक्सप्लोरर 6 कोई भी विचार में 2.7 सेकंड की तुलना में बेहतर समय प्राप्त करने के लिए ?,

धन्यवाद

Answer 1

मैंने सुना है कि innerText के बारे में दो बार IE में innerHTML की तुलना में तेजी है। यह सुनिश्चित नहीं है कि यह सच है, हालांकि, लेकिन यह एक कोशिश के लायक हो सकता है।

if (window.ActiveXObject) { // we're using IE 
    document.getElementById('myElement').innerText = 'Bla bla bla bla'; 
    // or create a textnode: 
    var txt = document.createTextNode('Lorem ipsum'); 
    document.getElementById('myElement').appendChild(txt); 
} else { 
    // other code here 
} 

अद्यतन: ध्यान दें कि यदि आप myElement का HTML संशोधित करने के लिए, innerText का उपयोग नहीं करना चाहते हैं - एचटीएमएल दिखाई सादे पाठ में, हो सकता है, जैसा कि आप < और > उपयोग कर रहे थे होगा।

Answer 2

यह किसी भी तेज़ नहीं होगा लेकिन यह ब्राउज़र को उपयोगकर्ता पर लॉक होने से रोक देगा; इसका इस्तेमाल करते हुए

function asyncInnerHTML(HTML, callback) { 
    var temp = document.createElement('div'), 
     frag = document.createDocumentFragment(); 
    temp.innerHTML = HTML; 
    (function(){ 
     if(temp.firstChild){ 
      frag.appendChild(temp.firstChild); 
      setTimeout(arguments.callee, 0); 
     } else { 
      callback(frag); 
     } 
    })(); 
} 

: वे जबकि इस पृष्ठभूमि में होता है पेज उपयोग जारी रख सकते

var allTheHTML = '<div><a href="#">.............</div>'; 
asyncInnerHTML(allTheHTML, function(fragment){ 
    myTarget.appendChild(fragment); // myTarget should be an element node. 
}); 

इस तकनीक से सादे innerHTML में लंबा समय लग जाएगा लेकिन उपयोगकर्ता पर ले जाने के लिए सक्षम हो जाएगा देरी को ध्यान में रखे बिना आपकी साइट का उपयोग करना।

Answer 3

सबसे पहले, मैं सुनिश्चित करता हूं कि आपका HTML जितना संभव हो सके उतना आसान हो। यथासंभव न्यूनतम संरचना मार्कअप के रूप में। इसकी कैस्केडिंग फीचर सहित हर जगह सीएसएस का उपयोग करें ताकि आप हर जगह क्लास एट्रिब्यूट स्थापित नहीं कर रहे हैं, आदि

फिर ब्राउज़र के सर्वोत्तम तरीकों में कुछ और शोध करने का प्रयास करें। उदाहरण के लिए, कुछ डीओएम ऑब्जेक्ट्स का निर्माण करके बेहतर करते हैं, कुछ इसे एक गैर-पेड़ डीओएम नोड के भीतरी एचटीएमएल में सेट करते हैं, फिर इसे पेड़ में जोड़ते हैं, आदि। मेरा सुझाव है कि आप Quirksmode.org's Benchmark - W3C DOM vs. innerHTML पढ़ लें।

आप संभवतः एक स्क्रिप्ट का उपयोग करना चाहेंगे जैसे जिमीपी ने भाग में जोड़ने का सुझाव दिया है, इसलिए ब्राउजर यूआई लटका नहीं दिखता है। हालांकि, आप इसे बहुत अधिक विभाजित नहीं करना चाहते हैं, या जब आपको उनकी आवश्यकता नहीं होती है तो आप अनावश्यक रूप से बहुत से पेज रीफ्रेश को ट्रिगर करेंगे।

Answer 4

एक बड़े HTML पेलोड के साथ आप आईई 6 में "ऑपरेशन निरस्त" त्रुटि का जोखिम चलाते हैं। कुछ समय लें और निम्नलिखित स्टैक ओवरफ़्लो प्रश्नों की समीक्षा करें, क्योंकि आंतरिक HTML का उपयोग करके डीओएम को अपडेट करने से त्रुटि उत्पन्न होती है और एमएस तिथि नहीं है जगह में कोई संपूर्ण सुधार है:

Why Does Asp.net cause the operation aborted error in ie7?

How To Overcome IE Bug When Dynamically Attaching DIV To Body From Script?

Answer 5

HTML के रूप में संभव के रूप में सरल है, या कम से कम तत्व/विशेषता नाम के साथ एक्सएमएल का उपयोग करें।

सीएसएस के साथ शैली (एक्सएसएलटी के साथ एक्सएमएल का उपयोग न करें, जो पार्स/बिल्ड करने के लिए धीमे होने का अंत हो सकता है)।

दुर्भाग्य से विभिन्न ब्राउज़रों में एक्सएमएल का प्रबंधन संगत नहीं है।

Answer 6

जेसन प्रारूप में प्रतिक्रिया क्यों नहीं लाएं और इसे क्लाइंट पक्ष पर संसाधित न करें, उदाहरण के लिए here प्रत्येक बार जब आप कोई नेविगेशन विकल्प बदलते हैं तो बड़ी मात्रा में डेटा संचालित होता है, और सभी पंक्तियां ग्राहक द्वारा प्रदान की जाती हैं।

Answer 7

सुनिश्चित करें कि आपका JSON/HTML/सादा पाठ जितना संभव हो सके उतना आसान है। सबसे आसान समाधान कम काम करना होगा, लेकिन यदि आपको वास्तव में 200k स्ट्रीम करने की आवश्यकता है, तो सुनिश्चित करें कि ब्राउज़र में परिवहन संपीड़ित है, जो आपके ऐप और/या वेब सर्वर में कॉन्फ़िगर करने योग्य होना चाहिए। Gzip'ping सामग्री (मान लीजिए कि आप एक AJAX- अनुकूल सेवा का उपयोग कर रहे हैं) वास्तव में मदद करता है, खासकर सरल पाठ के साथ।

अन्य चीजों को देखो जैसे कि किसी भी लूप को सरलीकृत किया जा सकता है, लेकिन ऐसा लगता है कि डेटा तैयार है और यह सुनिश्चित कर रहा है कि तार में डेटा को कुशलता से भेजा जा सके, सबसे अधिक मदद मिलेगी।

यदि आईई बाहरी है और अन्य सभी ब्राउज़र अच्छी तरह से काम करते हैं, तो आपको आगे बढ़ने की आवश्यकता हो सकती है। केवल इतना ही है कि आप कर सकते हैं, लेकिन मुझे संदेह है कि यह मुख्य समस्या नहीं है।