Question

当在IE9 +中向DOM添加大量元素时，CSS3规则的存在似乎会减慢重排速度，即使它们未被使用。

jsfiddle演示了这个问题： http://jsfiddle.net/2wfAq/19/

var name = "long_id_is_long_so_very_long";
var selectHtml = '<select id="' + name + '" name="data[long][id][is][long][so][very][long]">';

var start = Date.now();
var docFrag = document.createDocumentFragment();
var options = [];
var counter = 0;
$.each(optionsList, function (index, option) {
    options.push('<option id="' + name + '_' + counter+++'" value="' + option.value + '">' + option.content + '</option>');
});

var newContainer = document.createElement('span');
newContainer.innerHTML = selectHtml + options.join('\n') + "</select>";
docFrag.appendChild(newContainer);

var oldContainer = $('#' + name);
var domStart = Date.now();
oldContainer.after(docFrag);
console.log("[" + name + "] dom insertion: " + (Date.now() - domStart));
oldContainer.remove();

console.log("[" + name + "] complete render: " + (Date.now() - start));

这只是IE9-11中的一个问题，它在IE7-8（可能是由于没有CSS3支持），以及Chrome和Firefox中都有好转。

有没有办法让这些元素更快地进入页面？ CSS3规则是常见样式表的一部分，我无法删除它们

我也尝试通过javascript删除规则，但这似乎也没有任何影响。（http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript）

在Internet Explorer中使用CSS3缓慢更新DOM

0 个答案: