也谈Javascript的效率，createElement和innerHTML，为innerHTML平反
生活随笔
收集整理的這篇文章主要介紹了
也谈Javascript的效率，createElement和innerHTML，为innerHTML平反
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近遇到js的效率問題，是關于在頁面中新增元素的問題；
假設：我們有頁面如下
<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的效率高，其對比代碼如下
?
//?方法1function?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中的循環代碼：
var?str="<div?id='div_'"+i+"'?style='width:100px;?height:20px;background-color:#eee'>test</div>";
container.innerHTML?+=?str;
}
?其中有很多字符串操作，而且除了使用+號來連接字符串外，還使用了+=操作符，這就是問題的所在了，在javascript中這種操作字符串的做法是嚴重影響效率的，所以使用上面的方法來測試createEmenent和innerHTML的效率對innerHTML是不公平的， 據此看來很可能是字符串操作吃掉了innerHTML的性能，于是寫了下面的測試代碼
<HTML><HEAD>
</HEAD>
<BODY>
<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?=?'';"?/>
<div?id="div1"></div>
<div?id="div2"></div>
</BODY>
<script>
function?test1()
{
????var?d?=?new?Date();
????var?buf?=?new?Array();
????for?(var?n?=?0;?n?<?1000;?n?++)
????{
????????buf.push('<a?href="">測試');
????????buf.push(n);
????????buf.push('</a>');
????}
????
????div1.innerHTML?=?buf.join('');
????t1.value?=?'耗時：'?+??(new?Date()?-?d);
}
function?test2()
{
????var?d?=?new?Date();
????for?(var?n?=?0;?n?<?1000;?n?++)
????{
????????var?e?=?document.createElement('a');
????????e.href?=?'';
????????e.innerText?=?'測試'?+?n;
????????div2.appendChild(e);
????}
????
????t2.value?=?'耗時：'?+??(new?Date()?-?d);
}
</script>
</HTML>
?
?經測試發現：
總結：其實效率也在于編寫的代碼，在知道可用的API的效率后，怎么編寫代碼也是非常重要的，否則應由的執行效率不能體現出來，就如上面從網上搜到的那些代碼，得出一個與事實相悖的結論。
總結
以上是生活随笔為你收集整理的也谈Javascript的效率，createElement和innerHTML，为innerHTML平反的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript:document对
- 下一篇： HTML 标签自定义属性