document.createElement性能：Edge/IE11太慢v/s Chrome /火狐瀏覽器

我維護的一些門戶網站使用document.createElement在運行時在dropdownlist中創建options。一直很好，直到IE10，但在IE11或Edge突然表現已經大幅下降。document.createElement性能：Edge/IE11太慢v/s Chrome /火狐瀏覽器

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

使用瀏覽器的兩個組（IE11 /邊緣和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 /邊緣性能：

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++) { 
 
\t 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() { 
 
\t while (ddl.firstChild) { 
 
    \t 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() { 
 
\t while (ddl.firstChild) { 
 
    \t ddl.removeChild(ddl.firstChild) 
 
    } 
 
}

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

來源

2016-06-09 NP3

請將所有相關代碼直接放在問題中，而不是僅僅鏈接到其他某個網站上。 – 2016-06-09 11:10:08

這個問題特定於'option'元素嗎？或者使用'.add（）'方法？你有嘗試追加到循環中的'documentFragment'，然後將其附加到'select'元素？ – 2016-06-09 11:12:49

@squint：這個問題特定於'document.createElement'。下面的標記答案觸及了靶心。 – NP3

你可以構造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處理通常很慢，建議反對。

來源

2016-06-09 11:17:42 nardeas

我喜歡你，因爲這也解決了我的問題。但'.appendChild'似乎是一個更好的解決方案。 – NP3

document.createElement性能：Edge/IE11太慢v/s Chrome /火狐瀏覽器

回答

相關問題