當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JavaScript AppendChild 引发的思考
生活随笔
收集整理的這篇文章主要介紹了
JavaScript AppendChild 引发的思考
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
????? 昨天讓同事用js搞了個(gè)浮動(dòng)圖片功能,這樣就每次把些圖片直接貼過來了，節(jié)省了篇長(zhǎng)。但是看到代碼中AppendChild,感覺以前和js同事交流過AppendChild和innerHtml性能方面的話題,嗯，找了下一些我的js收集冊(cè)(也就是OneNote啦),呵呵
其實(shí)是這樣的，下面進(jìn)入AppendChild和innerHtml的性能隨語(yǔ):
直接看代碼，就可以了。
innerHTML:
<body>
</body>
<script>
var?starttime?=?new?Date();
for(i?=?0?;?i?<?100?;?i?++){
????document.body.innerHTML?+=?"<input?type='text'?value='"?+?i?+?"'>";
}
alert(new?Date()?-?starttime);
</script>
知道測(cè)試時(shí)間是比較長(zhǎng)，大約"1000"多
appendChild:
<body>
</body>
<script>
var?starttime?=?new?Date();
for(i?=?0?;?i?<?100?;?i?++){
????ds?=?document.createElement("input");
????ds.type?=?"text";
????ds.value?=?i;
????document.body.appendChild(ds);
}
alert(new?Date()?-?starttime);
</script> ?
<body>
</body>
<script>
var?starttime?=?new?Date();
var?html?=?[]
for(i?=?0?;?i?<?100?;?i?++){
????html.push("<input?type='text'?value='")
????html.push(i)
????html.push("'>")
}
document.body.innerHTML?=?html.join("")
alert(new?Date()?-?starttime);
</script>
時(shí)間大約為”20“
甚至如果你有更快的話，
<body>
</body>
<script>
var?starttime?=?new?Date();
var?a?=?[];
for(i?=?0?;?i?<?100?;?i?++){
????a[i]=?"<input?type='text'?value='"?+?i?+?"'>";
}
document.body.innerHTML??=?a.join("");
alert(new?Date()?-?starttime);
</script>
? 事實(shí)上，當(dāng)不同情況下，速度之比是不同的，
最后附上浮動(dòng)圖片的代碼:
<script>
function?link$onmouseover(){
????var?linkimg?=?this.linkimg;
????if(!linkimg){
????????linkimg?=?document.createElement("img");
????????with(linkimg){
????????????src?=?this.href;
????????????style.position?=?"absolute";
????????????style.left?=?this.style.left;
????????????style.top?=?this.style.top;
????????}
????????document.body.appendChild(linkimg);
????????this.linkimg?=?linkimg;
????}
????linkimg.style.display?=?"";
}
function?link$onmouseout(){
????var?linkimg?=?this.linkimg;
????if(linkimg){
????????linkimg.style.display?=?"none";
????}
}
</script>?
<a?id="link1"?href="圖示地址">?link1?</a><br?/>
<a?id="link2"?href="imagesCAZ4JHCC.jpg">?link2?</a>
<script>
var?link1?=?document.getElementById("link1");
var?link2?=?document.getElementById("link2");
link1.onmouseover?=?link$onmouseover;
link1.onmouseout?=?link$onmouseout;
link2.onmouseover?=?link$onmouseover;
link2.onmouseout?=?link$onmouseout;
</script>
其實(shí)是這樣的，下面進(jìn)入AppendChild和innerHtml的性能隨語(yǔ):
直接看代碼，就可以了。
innerHTML:
<body>
</body>
<script>
var?starttime?=?new?Date();
for(i?=?0?;?i?<?100?;?i?++){
????document.body.innerHTML?+=?"<input?type='text'?value='"?+?i?+?"'>";
}
alert(new?Date()?-?starttime);
</script>
知道測(cè)試時(shí)間是比較長(zhǎng)，大約"1000"多
appendChild:
<body>
</body>
<script>
var?starttime?=?new?Date();
for(i?=?0?;?i?<?100?;?i?++){
????ds?=?document.createElement("input");
????ds.type?=?"text";
????ds.value?=?i;
????document.body.appendChild(ds);
}
alert(new?Date()?-?starttime);
</script> ?
其實(shí)以上例子還可以在改進(jìn)一下，因?yàn)槠唇幼址?#xff0c;重新解析html方面的消耗，所以速度就下來。
innerHTML:<body>
</body>
<script>
var?starttime?=?new?Date();
var?html?=?[]
for(i?=?0?;?i?<?100?;?i?++){
????html.push("<input?type='text'?value='")
????html.push(i)
????html.push("'>")
}
document.body.innerHTML?=?html.join("")
alert(new?Date()?-?starttime);
</script>
時(shí)間大約為”20“
甚至如果你有更快的話，
<body>
</body>
<script>
var?starttime?=?new?Date();
var?a?=?[];
for(i?=?0?;?i?<?100?;?i?++){
????a[i]=?"<input?type='text'?value='"?+?i?+?"'>";
}
document.body.innerHTML??=?a.join("");
alert(new?Date()?-?starttime);
</script>
? 事實(shí)上，當(dāng)不同情況下，速度之比是不同的，
如：當(dāng)一次性加載大量且復(fù)雜的網(wǎng)頁(yè)元素時(shí)，用innerHTML比appendChild()速度要快的
而當(dāng)每次只加載幾個(gè)網(wǎng)頁(yè)元素，并且要頻繁加載時(shí)，此時(shí)appendChild()比innerHTML就快了。Clear
最后附上浮動(dòng)圖片的代碼:
<script>
function?link$onmouseover(){
????var?linkimg?=?this.linkimg;
????if(!linkimg){
????????linkimg?=?document.createElement("img");
????????with(linkimg){
????????????src?=?this.href;
????????????style.position?=?"absolute";
????????????style.left?=?this.style.left;
????????????style.top?=?this.style.top;
????????}
????????document.body.appendChild(linkimg);
????????this.linkimg?=?linkimg;
????}
????linkimg.style.display?=?"";
}
function?link$onmouseout(){
????var?linkimg?=?this.linkimg;
????if(linkimg){
????????linkimg.style.display?=?"none";
????}
}
</script>?
<a?id="link1"?href="圖示地址">?link1?</a><br?/>
<a?id="link2"?href="imagesCAZ4JHCC.jpg">?link2?</a>
<script>
var?link1?=?document.getElementById("link1");
var?link2?=?document.getElementById("link2");
link1.onmouseover?=?link$onmouseover;
link1.onmouseout?=?link$onmouseout;
link2.onmouseover?=?link$onmouseover;
link2.onmouseout?=?link$onmouseout;
</script>
轉(zhuǎn)載于:https://www.cnblogs.com/RuiLei/archive/2007/10/19/930079.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript AppendChild 引发的思考的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PSP 战神 奥林匹斯之链(God of
- 下一篇： gradle idea java ssm