欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

JavaScript AppendChild 引发的思考

发布时间：2023/12/31 javascript 52 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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>  

其实以上例子还可以在改进一下，因为拼接字符串，重新解析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 引发的思考的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。