快捷導(dǎo)航

javascript appendChild,innerHTML,join性能比較代碼

更新時間：2009年08月29日 16:20:05 作者：

在實際應(yīng)用中，應(yīng)該避免直接用innerHTML，對于大量的字符連接運(yùn)算，應(yīng)該考慮先運(yùn)算再輸出。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>appendChild,innerHTML,join</title> 
<script type="text/javascript"><!-- 
//使用appendChild()方法添加span標(biāo)簽 
function AppendDiv() 
{ 
var times=parseInt(document.getElementById('tbTimes').value); 
var oDiv=document.getElementById('div1'); 
var Text=document.getElementById('tbText').value; 
var Time=new Date(); 
var StartTime=Time.getTime(); 
for(var i=1;i<times;i++) 
{ 
var span=document.createElement('span'); 
span.appendChild(document.createTextNode(Text)); 
oDiv.appendChild(span); 
} 
var Time1=new Date(); 
var EndTime=Time1.getTime(); 
document.getElementById('TbDate').value=EndTime-StartTime 
} 
//使用innerhtml()方法添加span標(biāo)簽 
function InnerHTML() 
{ 
var times=parseInt(document.getElementById('tbTimes').value); 
var oDiv=document.getElementById('div1'); 
var Text=document.getElementById('tbText').value; 
var Time=new Date(); 
var StartTime=Time.getTime(); 
for(var i=1;i<times;i++) 
{ 
oDiv.innerHTML+="<span>"+Text+"</span>"; 
} 
var Time1=new Date(); 
var EndTime=Time1.getTime(); 
document.getElementById('TbDate').value=EndTime-StartTime 
} 
//使用 Array中push添加span 
function Join() 
{ 
var times=parseInt(document.getElementById('tbTimes').value); 
var oDiv=document.getElementById('div1'); 
var Text=document.getElementById('tbText').value; 
var Time=new Date(); 
var StartTime=Time.getTime(); 
var MyArray=new Array(); 
for(var i=1;i<times;i++) 
{ 
MyArray.push("<span>"+Text+"</span>"); 
} 
oDiv.innerHTML=MyArray.join(' '); 
var Time1=new Date(); 
var EndTime=Time1.getTime(); 
document.getElementById('TbDate').value=EndTime-StartTime 
} 

// --></script> 
</head> 
<body> 
<input type="text" id="tbText" value="ws_hgo " /><br /> 
<input type="text" id="tbTimes" value="1000" /><br /> 
<input type="text" id="TbDate" /><br /> 
<input id="Button1" type="button" value="Append" onclick="AppendDiv();" /> 
<input id="Button2" type="button" value="innerHTML" onclick="InnerHTML();" /> 
<input id="Button3" type="button" value="Join" onclick="Join();" /> 
<div id="div1"> 
</div> 
</body> 
</html>

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)實時圓形進(jìn)度條的方法示例
這篇文章主要給大家介紹了利用微信小程序?qū)崿F(xiàn)實時圓形進(jìn)度條的方法，文中給出了詳細(xì)的示例代碼，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-02-02
JS中通過url動態(tài)獲取圖片大小的方法小結(jié)(兩種方法)
這篇文章主要介紹了JS中通過url動態(tài)獲取圖片大小的方法小結(jié)，本文給大家列舉了兩種方法，大家可以嘗試下看哪種方法好用，感興趣的朋友跟隨小編一起看看吧
2018-10-10
深入理解jQuery()方法的構(gòu)建原理
對于JQuery，想必大家都很熟悉。目前，很多web項目，在實施的過程中，考慮到各瀏覽器原生JS API的兼容性，大都會選用JQuery或類似于JQuery這樣的框架來進(jìn)行網(wǎng)頁效果開發(fā)。這篇文章將給大家深入介紹jQuery()方法的構(gòu)建原理，有需要的朋友們可以參考借鑒。
2016-12-12
JavaScript中的一些實用小技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中的一些實用小技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
微信小程序 css使用技巧總結(jié)
這篇文章主要介紹了微信小程序 css使用技巧總結(jié)的相關(guān)資料,需要的朋友可以參考下
2017-01-01
Position屬性之relative用法
Relative是position的一個屬性，是相對定位，通過本篇文章給大家介紹Position屬性之relative用法，對position屬性relative相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
JS禁用頁面上所有控件的實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS禁用頁面上所有控件的方法,涉及JavaScript捕捉頁面元素的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2015-12-12
Jquery把獲取到的input值轉(zhuǎn)換成json
本篇文章主要介紹了Jquery把獲取到的input值轉(zhuǎn)換成json的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧
2017-05-05
圖解JavaScript中的this關(guān)鍵字
這篇文章利用圖片講解的方式向大家解釋了JavaScript中的this關(guān)鍵字，JavaScript this 到底指向什么？從這篇文章中大家可以得到想要的答案，需要的朋友可以參考下
2015-10-10
一道面試題引發(fā)的對javascript類型轉(zhuǎn)換的思考
本文主要介紹了javascript類型轉(zhuǎn)換的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03