window.open MS Edge/IE 性能低下

Question

打开一个新的 window 然后在新的 window 中从原来的 window 操作 DOM 在 IE 中执行非常慢。

Chrome和FF没有这个问题

我已验证 MS Edge、IE11 和 IE9 会出现这种情况。

有没有人运行以前参与过这个并且知道根本原因或 MS 浏览器中可能的修复方法？

这里 fiddle 重现了这个问题（可能必须禁用弹出窗口拦截器）：
http://jsfiddle.net/aw2basc/5mb9eqrh/

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

/*
<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;dr
在 IE 的外部 window 中最小化 DOM 很慢；没有人能解释为什么，也没有解决办法。
要么不要在windows与js之间工作，用服务器顶嘴和第四；或尽可能 'few' 更新，并忍受延迟...

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 性能低下

window.open MS Edge/IE slow performance

javascript

performance

internet-explorer

window.open

microsoft-edge