當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript AppendChild 引发的思考
生活随笔
收集整理的這篇文章主要介紹了
JavaScript AppendChild 引发的思考
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
????? 昨天讓同事用js搞了個浮動圖片功能,這樣就每次把些圖片直接貼過來了，節省了篇長。但是看到代碼中AppendChild,感覺以前和js同事交流過AppendChild和innerHtml性能方面的話題,嗯，找了下一些我的js收集冊(也就是OneNote啦),呵呵
其實是這樣的，下面進入AppendChild和innerHtml的性能隨語:
直接看代碼，就可以了。
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>
知道測試時間是比較長，大約"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>
時間大約為”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>
? 事實上，當不同情況下，速度之比是不同的，
最后附上浮動圖片的代碼:
<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>
其實是這樣的，下面進入AppendChild和innerHtml的性能隨語:
直接看代碼，就可以了。
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>
知道測試時間是比較長，大約"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> ?
其實以上例子還可以在改進一下，因為拼接字符串，重新解析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>
時間大約為”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>
? 事實上，當不同情況下，速度之比是不同的，
如：當一次性加載大量且復雜的網頁元素時，用innerHTML比appendChild()速度要快的
而當每次只加載幾個網頁元素，并且要頻繁加載時，此時appendChild()比innerHTML就快了。Clear
最后附上浮動圖片的代碼:
<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>
轉載于:https://www.cnblogs.com/RuiLei/archive/2007/10/19/930079.html
總結
以上是生活随笔為你收集整理的JavaScript AppendChild 引发的思考的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PSP 战神 奥林匹斯之链(God of
- 下一篇： Binary Formats in Ja