来源:http://www.cnblogs.com/RuiLei/archive/2007/10/19/930079.html
昨天让同事用js搞了个浮动图片功能,这样就每次把些图片直接贴过来了,节省了篇长。但是看到代码中AppendChild,感觉以前和js同事交流过AppendChild和innerHtml性能方面的话题,嗯,找了下一些我的js收集册(也就是OneNote啦),呵呵
其实是这样的,下面进入AppendChild和innerHtml的性能随语:
直接看代码,就可以了。
innerHTML:
var starttime = new Date();
for(i = 0 ; i < 100 ; i ++){
document.body.innerHTML += "<input type='text' value='" + i + "'>";
}
alert(new Date() - starttime);
知道测试时间是比较长,大约"1000"多
appendChild:
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);
其实以上例子还可以在改进一下,因为拼接字符串,重新解析html方面的消耗,所以速度就下来。
innerHTML:
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);
时间大约为”20“
甚至如果你有更快的话,
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);
事实上,当不同情况下,速度之比是不同的,
如:当一次性加载大量且复杂的网页元素时,用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>
分享到:
相关推荐
主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下
主要介绍了详解javascript appendChild()的完整功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... <head> <title>appendChild,innerHTML,join</title> [removed]<...– //使用appendChild()方法添加span标签 function AppendD
appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ 添加一个节点到指定的...
js原生appendChild的bug解决心得分享.docx
Serialize-javascript 能够序列化 JavaScript 库成含有正则表达式和功能的 JSON 包。示例:var serialize = require('serialize-javascript'); serialize({ str : 'string', num : 0, obj : {foo: ...
给大家介绍了javascript实现的动态添加表单元素input,button等(appendChild)的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
NULL 博文链接:https://penghuaiyi.iteye.com/blog/579357
JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...
appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore(newnode, existingnode) 在已有子节点之前插入新的子节点。 removeChild(node) 删除元素的某个指定的子节点,并以 Node 对象返回被...
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild) insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore...
<script type="text/javascript"> function hideContextmenu(){ return false; } ()"> 2.直接在JavaScript代码中设置元素对象的事件属性 <script type="text/javascript"> document....
主要给大家介绍了关于JS中appendChild追加子节点无效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
recordingslist.appendChild(div); }); } function log(str) { recordingslist[removed] += str + ' '; } function funUpload() { var fd = new FormData(); var mp3Name = ...
appendChild定义appendChild(newChild: Node) : NodeAppends a node to the childNodes array for the node.Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+添加一个节点到指定的节点的...