javascript appendChild,innerHTML,join性能比較代碼
更新時(shí)間：2009年08月29日 16:20:05 作者：
在實(shí)際應(yīng)用中，應(yīng)該避免直接用innerHTML，對(duì)于大量的字符連接運(yùn)算，應(yīng)該考慮先運(yùn)算再輸出。
復(fù)制代碼 代碼如下:
<!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>
您可能感興趣的文章:
- 初學(xué)js插入節(jié)點(diǎn)appendChild insertBefore使用方法
- javascript實(shí)現(xiàn)的動(dòng)態(tài)添加表單元素input,button等(appendChild)
- JavaScript之a(chǎn)ppendChild、insertBefore和insertAfter使用說(shuō)明
- js中AppendChild與insertBefore的用法詳細(xì)解析
- 走馬燈效果代碼js appendChild實(shí)現(xiàn)的無(wú)縫滾動(dòng)
- js原生appendChild的bug解決心得分享
- js AppendChild與insertBefore用法詳細(xì)對(duì)比
- javascript使用appendChild追加節(jié)點(diǎn)實(shí)例
- js利用appendChild對(duì)<li>標(biāo)簽進(jìn)行排序的實(shí)現(xiàn)方法
- JS中appendChild追加子節(jié)點(diǎn)無(wú)效的解決方法
相關(guān)文章
微信小程序?qū)崿F(xiàn)實(shí)時(shí)圓形進(jìn)度條的方法示例
這篇文章主要給大家介紹了利用微信小程序?qū)崿F(xiàn)實(shí)時(shí)圓形進(jìn)度條的方法，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-02-02
JS中通過(guò)url動(dòng)態(tài)獲取圖片大小的方法小結(jié)(兩種方法)
這篇文章主要介紹了JS中通過(guò)url動(dòng)態(tài)獲取圖片大小的方法小結(jié)，本文給大家列舉了兩種方法，大家可以嘗試下看哪種方法好用，感興趣的朋友跟隨小編一起看看吧2018-10-10
對(duì)于JQuery，想必大家都很熟悉。目前，很多web項(xiàng)目，在實(shí)施的過(guò)程中，考慮到各瀏覽器原生JS API的兼容性，大都會(huì)選用JQuery或類似于JQuery這樣的框架來(lái)進(jìn)行網(wǎng)頁(yè)效果開發(fā)。這篇文章將給大家深入介紹jQuery()方法的構(gòu)建原理，有需要的朋友們可以參考借鑒。2016-12-12
JavaScript中的一些實(shí)用小技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中的一些實(shí)用小技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了微信小程序 css使用技巧總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-01-01
Relative是position的一個(gè)屬性，是相對(duì)定位，通過(guò)本篇文章給大家介紹Position屬性之relative用法，對(duì)position屬性relative相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JS禁用頁(yè)面上所有控件的實(shí)現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS禁用頁(yè)面上所有控件的方法,涉及JavaScript捕捉頁(yè)面元素的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
Jquery把獲取到的input值轉(zhuǎn)換成json
本篇文章主要介紹了Jquery把獲取到的input值轉(zhuǎn)換成json的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
這篇文章利用圖片講解的方式向大家解釋了JavaScript中的this關(guān)鍵字，JavaScript this 到底指向什么？從這篇文章中大家可以得到想要的答案，需要的朋友可以參考下2015-10-10
一道面試題引發(fā)的對(duì)javascript類型轉(zhuǎn)換的思考
本文主要介紹了javascript類型轉(zhuǎn)換的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03