Ich habe ein schwerwiegendes Leistungsproblem festgestellt, wenn mein JS-Code unter IE läuft (10, 11). Im Vergleich zu anderen Browsern ist es 10 mal langsamer.IE DOM Manipulationsleistung
Ich habe einige Profiling und es scheint, dass innerHTML und createElement ist super langsam.
Ich habe versucht, zu optimieren mit createDocumentFragment, die sogar beschleunigen meinen Code in anderen Browsern, aber die Leistung unter IE bleibt intakt.
Hier ist der Code
<!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>
ich versuchte, mit String-Verkettung zu optimieren teure DOM-Operationen zu vermeiden, die es viel schneller gemacht, aber immer noch sehr langsam, wenn zu anderen Browsern zu vergleichen.
<!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>
Gibt es eine Möglichkeit, dynamisches DOM in IE schnell zu machen? Ich muss ziemlich große DOM-Bäume mit Javascript mit einigen Templating generieren und IE-Leistung ist in diesem Fall nur ein Mörder.
Irgendwelche Hilfe?
Ich habe etwas gefunden, obwohl bei http://stackoverflow.com/questions/14080365/bad-performance-ie-using-documentfragment –
Es kann die Bildschirmaktualisierung sein, die langsam ist, könnten Sie versuchen, die Einfügung während der Animation Frame zu tun mit https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame –