Question

打开一个新窗口，然后在原始窗口的新窗口内操作DOM，在IE中执行速度非常慢。

Chrome和FF没有此问题。

我已经确认MS Edge，IE11和IE9会发生这种情况。

之前是否有人遇到此问题，并且知道MS浏览器的根本原因或可能的修复方法？

这是复制问题的小提琴（可能必须禁用弹出窗口阻止程序）：
http://jsfiddle.net/aw2basc/5mb9eqrh/

以下代码仅供演示之用
（显示它在新窗口中呈现的速度有多慢）

/*
<div id="container">
    <div id="main"></div>
</div>
*/

var someArray = Array.apply(0,Array(1000)).map(function(e,i){return i%10}),
    newWindow = window.open('http://fiddle.jshell.net/','newwin','width=530,height=420'),
    content = document.getElementById('container').innerHTML;

function addStuff(document){
    var main = document.getElementById('main');
    someArray.forEach(function(e){
        var ele = document.createElement('div');
        ele.innerHTML = e;
        ele.style.float = 'left';
        main.appendChild(ele);
    });
}

addStuff(window.document);

setTimeout(function(){
    newWindow.document.body.innerHTML = content;
    addStuff(newWindow.document);
},4000);

TL;博士
在IE中的外部窗口中使用Minuplating DOM只是很慢;没人能解释原因，也没有解决办法要么在没有js的窗口之间工作，要么使用服务器进行对话和第四次;或制作少数＆＃39;尽可能更新，只是忍受延迟......

Answer 1

这可能是因为您正在创建新元素，然后在循环中一个接一个地将它们添加到DOM树中，这将导致所有浏览器的性能降低。它根本不会影响所有浏览器，具体取决于您正在使用的功能的优化级别。

这是一种更好的方法：

function addStuff(document){
    var main = document.getElementById('main');
    var html = '';

    someArray.forEach(function(e){
        html += '<div style="float: left;">' + e + '</div>';
    });

    main.innerHTML += html;
}

window.open MS Edge / IE性能下降

1 个答案: