|
|
假設我們有頁面如下：
復制代碼 代碼如下:
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id="div1"></div>
</BODY>
<script>
// 腳本位置
</script>
</HTML>
現在，我們要往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的性能，于是寫了下面的測試代碼：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
經測試發現：
1、在創建的對象較少（0-大約10左右）時，innerHTML和createElement效率差不多，測試值悠忽不定；
2、在創建對象多于20時，innerHTML要比createElement效率高很多，平均測試差不多createElement耗時是innerHTML的兩倍。
總結：其實效率也在于編寫的代碼，在知道可用的API的效率后，怎么編寫代碼也是非常重要的，否則應由的執行效率不能體現出來，就如上面從網上搜到的那些代碼，得出一個與事實相悖的結論。
JavaScript技術：Javascript createElement和innerHTML增加頁面元素的性能對比，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
