首頁 > 開發者 > JavaScript
現在，我們要往div1中添加對象，大家都知道在為web頁面增加一個元素時可以使用如下代碼：
//方法1
div1.innerHTML = '<a href="">測試</a>';
或者：
//方法2
var a = document.createElement('a');
a.innertText = '測試';
div1.appendChild(a);
在網上搜尋到一個探討js效率問題的文章，其大概意思是說方法2的效率高，其對比代碼如下： 複製代碼 代碼如下:// 方法1
function init(){
var staDate = new Date();
var doc = window.document;
for(var i=0;i<100;i++){
var str="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>";
container.innerHTML += str;
}
alert(new Date - staDate);
}
//方法2
function init(){
var staDate = new Date();
var doc = window.document;
for(var i=0;i<100;i++){
var oDiv = doc.createElement("div");
var oText = doc.createTextNode("text");
oDiv.appendChild(oText);
container.appendChild(oDiv);
oDiv.style.id = "div_"+i;
oDiv.style.width = "100px";
oDiv.style.height = "20px";
oDiv.style.backgroundColor = "#eee";
}
alert(new Date - staDate);
}
其頁面中有：
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
從執行效果來看方案2要比方案1快10倍左右，到底這是不是真的呢？其實上面的測試代碼是有待商榷的，且看其方法1中的迴圈代碼： 複製代碼 代碼如下:for(var i=0;i<100;i++){
var str="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>";
container.innerHTML += str;
}
其中有很多字串操作，而且除了使用+號來連接字串外，還使用了+=操作符，這就是問題的所在了，在javascript中這種操作字串的做法是嚴重影響效率的，所以使用上面的方法來測試createEmenent和innerHTML的效率對innerHTML是不公平的， 據此看來很可能是字串操作吃掉了innerHTML的效能，於是寫了下面的測試代碼： <input type="button" value="測試1" onclick="test1()"><input type="text" readonly id="t1"><input type="button" value="測試2" onclick="test2()"><input type="text" readonly id="t2"><input type="button" value="清空" onclick="div1.innerHTML = ''; div2.innerHTML = ''; t1.value=''; t2.value = '';"><p>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
