CODEWITHSUNDEEP
javascriptperformanceinternet-explorer-11microsoft-edge
NP3
NP3

Reputation: 662

document.createElement Performance: Edge/IE11 too slow v/s Chrome/Firefox

Some of the web portals that I maintain use document.createElement to create options in a dropdownlist at runtime. All was well till IE10 but in IE11 or Edge suddenly the performance has gone down dramatically.

I have created a Fiddle: https://jsfiddle.net/nitinph/ej5p65um/

Please run it using both the sets of browsers (IE11/Edge and Chrome/Firefox). You will notice that IE11/Edge takes 10+ seconds whereas Chrome/Firefox takes less than a second.

My question is that is there any alternate way for using document.createElement so that performance is similar in 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>

Update: Courtesy @Squint, here are the four alternatives to achieve performance in 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>

Upvotes: 1

Views: 2781

Answers (1)

nardeas
nardeas

Reputation: 634

You could construct the element HTML with strings:

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

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

Then create the element and set the innerHTML

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

This usually offers much better performance as you only call document.createElement() once. Direct dynamic DOM processing, sadly, is usually pretty slow and is recommended against.

Upvotes: 1

Related Questions