Question

我维护的一些Web门户在运行时使用document.createElement在options中创建dropdownlist。一切都很好，直到IE10，但在IE11或Edge突然表现已经大幅下降。

我创建了一个小提琴：https://jsfiddle.net/nitinph/ej5p65um/

请使用两套浏览器（IE11 / Edge和Chrome / Firefox）运行它。您会注意到IE11 / Edge需要10秒以上，而Chrome / Firefox只需不到一秒钟。

我的问题是，是否有使用document.createElement的替代方法，以便IE11 / Edge中的性能类似。

var pTime = document.getElementById("pTime");
var d = new Date();
var n = d.getTime();
var ddl = document.getElementById("TestDDL");
for (var i = 0; i < 5000; i++) {
  var opt = document.createElement("option");
  opt.text = i;
  opt.value = i;
  ddl.options.add(opt);
}
d = new Date();
var n1 = d.getTime();
pTime.innerHTML = 'Time: ' + (n1 - n) / 1000 + ' sec.';

<select id="TestDDL">
</select>
<p id="pTime">
</p>

更新：礼貌 @Squint ，以下是在IE11 / Edge中实现性能的四种选择：

var ddl = document.getElementById("TestDDL");

console.time("html")
var s = ""
for (var i = 0; i < 5000; i++) {
  s += "<option value='" + i + '>' + i + "</option>"
}
ddl.innerHTML = s;
console.timeEnd("html")

clearContent()

console.time("insertAdjacentHTML")
for (var i = 0; i < 5000; i++) {
	ddl.insertAdjacentHTML("beforeend", "<option value='" + i + '>' + i + "</option>")
}
console.timeEnd("insertAdjacentHTML")

clearContent()

console.time("frag")
var frag = document.createDocumentFragment();
for (var i = 0; i < 5000; i++) {
  var opt = document.createElement("option");
  opt.text = i;
  opt.value = i;
  frag.appendChild(opt);
}
ddl.appendChild(frag);
console.timeEnd("frag")

clearContent()

console.time("direct add")
for (var i = 0; i < 5000; i++) {
  var opt = document.createElement("option");
  opt.text = i;
  opt.value = i;
  ddl.options.add(opt);
}
console.timeEnd("direct add")


function clearContent() {
	while (ddl.firstChild) {
  	ddl.removeChild(ddl.firstChild)
  }
}

clearContent()

console.time("direct append")
for (var i = 0; i < 5000; i++) {
  var opt = document.createElement("option");
  opt.text = i;
  opt.value = i;
  ddl.appendChild(opt);
}
console.timeEnd("direct append")


function clearContent() {
	while (ddl.firstChild) {
  	ddl.removeChild(ddl.firstChild)
  }
}

<select id="TestDDL">
</select>
<p id="pTime">
</p>

Answer 1

您可以使用字符串构建元素HTML：

var optionList = ["foo", "bar", "baz"];
var elementHTML = "";

for (var index = 0; index < optionList.length; index++) {
    elementHTML += "<option>" + optionList[index] + "</option>";
}

然后创建元素并设置innerHTML

var element = document.createElement("select");
element.innerHTML = elementHTML;

这通常会提供更好的效果，因为您只需拨打document.createElement()一次。遗憾的是，直接动态DOM处理通常很慢，建议不要使用。

document.createElement性能：Edge / IE11太慢v / s Chrome / Firefox

1 个答案: