当我的 JS 代码在 IE (10, 11) 下运行时，我遇到了严重的性能问题。与其他浏览器相比，它的速度要慢 10 倍。
我做了一些分析，似乎 innerHTML 和 createElement super 慢。
我尝试使用 createDocumentFragment 进行优化，它甚至可以在其他浏览器中加速我的代码，但在 IE 下的性能保持不变。
这是代码
<!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>
我尝试优化使用字符串连接以避免昂贵的 DOM 操作，这使得它更快，但与其他浏览器相比仍然非常慢。
<!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>
有什么方法可以在 IE 中快速生成动态 DOM？我需要使用带有一些模板的 Javascript 生成相当大的 DOM 树，而 IE 性能在这种情况下只是一个 killer 。
有什么帮助吗？
最佳答案
Microsoft 自己建议不要使用 innerHtml，而是使用 createTextNode + appendChild - 参见 https://msdn.microsoft.com/en-us/library/ms533897%28v=vs.85%29.aspx
如果我是你，我会先重构代码。
关于javascript - IE DOM 操作性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30376508/