Ho riscontrato un grave problema di prestazioni quando il mio codice JS è in esecuzione su IE (10, 11). È 10 volte più lento rispetto ad altri browser.Prestazioni di manipolazione DOM IE
Ho fatto un po 'di profilazione e sembra che innerHTML e createElement sia super lento.
Ho provato a ottimizzare utilizzando createDocumentFragment, che velocizza anche il mio codice in altri browser, ma le prestazioni in IE rimangono intatte.
Ecco il codice
<!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>
Ho cercato di ottimizzare utilizzando concatenazione di stringhe per evitare operazioni DOM costose, che ha reso molto più veloce, ma ancora molto lento quando si confrontano ad altri browser.
<!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>
C'è un modo per rendere veloce DOM dinamico in IE? Ho bisogno di generare alberi DOM piuttosto grandi usando Javascript con alcuni template e le prestazioni di IE sono solo un killer in questo caso.
Qualsiasi aiuto?
Ho trovato qualcosa di simile a http://stackoverflow.com/questions/14080365/bad-performance-ie-using-documentfragment –
Potrebbe essere l'aggiornamento dello schermo che è lento, si potrebbe provare a fare l'inserimento durante l'animationFrame utilizzando https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame –