जब मेरा जेएस कोड आईई (10, 11) के तहत चलता है तो मुझे गंभीर प्रदर्शन समस्या का सामना करना पड़ा। किसी अन्य ब्राउज़र की तुलना में यह 10 गुना धीमा है।आईई डोम मैनिपुलेशन प्रदर्शन
मैंने कुछ प्रोफाइलिंग किया और ऐसा लगता है कि innerHTML और createElement बहुत धीमी है।
मैंने createDocumentFragment का उपयोग करके अनुकूलित करने का प्रयास किया, जो मेरे ब्राउज़र को अन्य ब्राउज़रों में भी तेज करता है, लेकिन आईई के तहत प्रदर्शन बरकरार रहता है।
यहाँ कोड
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<script>
function a() {
var CNT = 100000;
var start, end, time;
start = window.performance.now();
var frag = document.createDocumentFragment();
for (var i = 0, l = CNT; i < l; ++i) {
var el = document.createElement('div');
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);
end = window.performance.now();
time = end - start;
console.log('time', time);
}
a();
</script>
</body>
</html>
मैं स्ट्रिंग संयोजन का उपयोग कर महंगा डोम के संचालन से बचने के लिए अनुकूलन करने की कोशिश की है, जो इसे और अधिक तेजी से बनाया बहुत धीमी गति से जब अन्य ब्राउज़रों की तुलना में है, लेकिन अभी भी।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<script>
function a() {
var CNT = 100000;
var start, end, time;
start = window.performance.now();
var frag = document.createDocumentFragment();
var content = '';
for (var i = 0, l = CNT; i < l; ++i) {
content += '<div>' + i + '</div>';
}
var holder = document.createElement('div');
holder.innerHTML = content;
frag.appendChild(holder);
document.body.appendChild(frag);
end = window.performance.now();
time = end - start;
console.log('time', time);
}
a();
</script>
</body>
</html>
क्या आईई में गतिशील डोम तेजी से बनाने का कोई तरीका है? मुझे कुछ टेम्पलेटिंग के साथ जावास्क्रिप्ट का उपयोग करके काफी बड़े डीओएम पेड़ उत्पन्न करने की ज़रूरत है और आईई प्रदर्शन इस मामले में सिर्फ एक हत्यारा है।
कोई मदद?
मुझे कुछ संबंधित पाया गया है हालांकि http://stackoverflow.com/questions/14080365/bad-performance-ie-using-documentfragment –
यह स्क्रीन रीफ्रेश हो सकता है जो धीमा है, आप एनीमेशन फ्रेम के दौरान सम्मिलित करने का प्रयास कर सकते हैं https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame का उपयोग करना –