JavaScript AppendChild 引发的思考

昨天让同事用js搞了个浮动图片功能,这样就每次把些图片直接贴过来了，节省了篇长。但是看到代码中AppendChild,感觉以前和js同事交流过AppendChild和innerHtml性能方面的话题,嗯，找了下一些我的js收集册(也就是OneNote啦),呵呵
其实是这样的，下面进入AppendChild和innerHtml的性能随语:
直接看代码，就可以了。

innerHTML:

<body>

</body>

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>

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>

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>

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

最后附上浮动图片的代码:

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>

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 引发的思考相关推荐

JAVA-OPTS引发的思考
JAVA-OPTS引发的思考我们在性能测试过程中,经常要修改应用的JAVA-OPTS参数.修改这些参数,不单单是修改这些数字,本着知其所以然的态度,我们要知道这些参数背后的意义. 常见的JAVA-O ...
一个小程序引发的思考
既然是一个小程序引发的思考,那么我们就先看看这个小程序,看看他有何神奇之处: namespace ConsoleApplication1 {class Program{static void Main ...
由“递归遍历二叉树”引发的思考
由"递归遍历二叉树"引发的思考递归的用法我感觉自己已经掌握了,可是今天在递归遍历二叉树时,它又迷一样令我费解.我本人在算法这一块很薄弱,所以想把这个问题发出来,希望有大神能够为我 ...
由一行文本输入框引发的思考
文章是关于React组件之表单单行文本输入框的一些思考.可能大家第一反应都是,不就是一行<input/>嘛,没什么特别的吧?如果说到输入框的值的话,可能圈子里上大多数封装好的React ...
由熊猫烧香引发的思考
由熊猫烧香引发的思考早期的计算机病毒诞生,作者是以技术炫耀为主,编写这类病毒需要更深入的了解系统及网络技术,开发功底也要更深厚.现阶段,一个合格的程序员,制造出具备破坏性的代码,已经不怎么难.甚至, ...
Spring之LoadTimeWeaver——一个需求引发的思考---转
原文地址:http://www.myexception.cn/software-architecture-design/602651.html Spring之LoadTimeWeaver--一个需求引 ...
由SecureCRT引发的思考和学习
由SecureCRT引发的思考和学习 http://mp.weixin.qq.com/s?__biz=MzAxOTAzMDEwMA==&mid=2652500597&idx=1& ...
C语言中递归什么时候能够省略return引发的思考：通过内联汇编解读C语言函数return的本质...
C语言中递归什么时候能够省略return引发的思考:通过内联汇编解读C语言函数return的本质事情的经过是这种,博主在用C写一个简单的业务时使用递归,因为粗心而忘了写return.结果发现返回的结 ...
由「Metaspace容量不足触发CMS GC」从而引发的思考
转载自由「Metaspace容量不足触发CMS GC」从而引发的思考某天早上,毛老师在群里问「cat 上怎么看 gc」. 好好的一个群看到有 GC 的问题,立马做出小鸡搓手状. 之后毛老师发来 ...

JavaScript AppendChild 引发的思考

JavaScript AppendChild 引发的思考相关推荐

最新文章

热门文章