IE DOM 操作性能答案

【问题标题】：IE DOM manipulation performanceIE DOM 操作性能
【发布时间】：2015-08-03 06:49:59
【问题描述】：

当我的 JS 代码在 IE (10, 11) 下运行时，我遇到了严重的性能问题。与其他浏览器相比，它慢了 10 倍。

我做了一些分析，似乎innerHTML 和createElement 超级慢。

我尝试使用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 性能只是一个杀手。

有什么帮助吗？

【问题讨论】：

我在stackoverflow.com/questions/14080365/…找到了一些相关的东西
可能是屏幕刷新速度慢，你可以尝试在animationFrame中使用developer.mozilla.org/en-US/docs/Web/API/window/…进行插入

标签： javascript html performance internet-explorer dom

【解决方案1】：

Microsoft 自己建议不要使用innerHtml，而是使用createTextNode + appendChild - 请参阅https://msdn.microsoft.com/en-us/library/ms533897%28v=vs.85%29.aspx

如果我是你，我会先重构代码。

【讨论】：