IE DOM操纵性能

Question

IE DOM操纵性能

Mar*_*cak 5 html javascript performance internet-explorer dom

当我的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>

Run Code Online (Sandbox Code Playgroud)

我尝试使用字符串连接进行优化以避免代价高昂的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>

Run Code Online (Sandbox Code Playgroud)

有没有办法在IE中快速制作动态DOM？我需要使用带有一些模板的Javascript生成相当大的DOM树,在这种情况下,IE性能只是一个杀手.

有帮助吗？

Answer 1

Loc*_*ade 0

微软自己建议不要使用innerHtml, 并使用createTextNode+appendChild代替 - 请参阅https://msdn.microsoft.com/en-us/library/ms533897%28v=vs.85%29.aspx

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

归档时间：	10 年，6 月前
查看次数：	2019 次
最近记录：	10 年，5 月前