问个HTML的问题。请高手指教

feng5902 发布于 2011/08/16 17:59
阅读 550
收藏 0

【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”

document.createElement("div") 与  document.write("<div></div>")  这两种方式哪种方式的效率更高一点?为什么?

加载中
0
梦飞哥
梦飞哥
貌似这种写法不对呀,应该是 document.write("<div>"+"</div>") 
ShaoJiahao
ShaoJiahao
恩,有区别,多了个拼接,哈哈
梦飞哥
梦飞哥
你试试便知,
小编辑
小编辑
有区别吗
0
Andre.Z
Andre.Z
如果Object的属性赋值多的话 createElement的效率要低于 write,好像是这样,忘记了。
0
无量
无量
一个是Html Dom中的方法,一个是XML Dom中的方法,我觉得是 createElement的效率要高,write输出字符串后,应该还有个转换成html的过程吧
0
hikari
hikari

我的理解是,针对这里的代码而言,

createElement()是创建一个节点,还没有引起图像渲染,只存在于内存,页面内容暂时没有改变。

document.write()之后页面内容引起改变,引起图像渲染。

前者有类似“双缓冲”的作用,添加其他属性、式样和textnode之后再添加到指定的父节点上再渲染,后者直接加在末尾或者取代当前的内容(trident/gecko/webkit有别)马上渲染。

说效率,要看具体是什么效率了。

0
蟋蟀哥哥
蟋蟀哥哥
- - 这个还有效率啊???  你多大的网页啊?? 多少javascript啊??
   这点细微差别 人还能感觉到?
0
MUTEX
MUTEX

基本上,这两个是等同的。因为javascript的处理过程是单线程的,所以在一段javascript执行完成之前,浏览器基本上不做页面的渲染操作,所以上面两条语句在执行渲染之前都需要处理DOM,然后根据DOM来进行渲染。尝试运行下面的页面,可以看到两者执行效率其实是差不多的。

<html>
<head>
<script type="text/javascript">
function doDocumentWrite(){
	var start = new Date();
	document.write(start);
	for(i=0;i<10000;i++) {
		document.write("<div>Line "+ i +"</div>");
	}
	var stop = new Date();
	document.write(stop);
}

function doCreateElement(){
	var start = new Date();
	document.write(start);
	var e;
	for(i=0;i<10000;i++) {
		e = document.createElement("div");
		e.innerHTML = "Line "+i;
		document.body.appendChild(e);
	}
	var stop = new Date();
	document.write(stop);
}
</script>
</head>
<body>
<input type="button" onclick="doDocumentWrite()" value="Test document.write()"/>
<input type="button" onclick="doCreateElement()" value="Test document.createElement()"/>
<script type="text/javascript">
//doDocumentWrite();
//doCreateElement();
</script>
</body>
</html>

 

0
jingshishengxu
jingshishengxu

引用来自“MUTEX”的答案

基本上,这两个是等同的。因为javascript的处理过程是单线程的,所以在一段javascript执行完成之前,浏览器基本上不做页面的渲染操作,所以上面两条语句在执行渲染之前都需要处理DOM,然后根据DOM来进行渲染。尝试运行下面的页面,可以看到两者执行效率其实是差不多的。

<html>
<head>
<script type="text/javascript">
function doDocumentWrite(){
	var start = new Date();
	document.write(start);
	for(i=0;i<10000;i++) {
		document.write("<div>Line "+ i +"</div>");
	}
	var stop = new Date();
	document.write(stop);
}

function doCreateElement(){
	var start = new Date();
	document.write(start);
	var e;
	for(i=0;i<10000;i++) {
		e = document.createElement("div");
		e.innerHTML = "Line "+i;
		document.body.appendChild(e);
	}
	var stop = new Date();
	document.write(stop);
}
</script>
</head>
<body>
<input type="button" onclick="doDocumentWrite()" value="Test document.write()"/>
<input type="button" onclick="doCreateElement()" value="Test document.createElement()"/>
<script type="text/javascript">
//doDocumentWrite();
//doCreateElement();
</script>
</body>
</html>

 

这代码明显第二种慢很多

在我电脑 ie7 write方式在1秒内,create方式用2秒

MUTEX
MUTEX
IE慢在 e.innerHTML = "Line "+i; 这句上,与createElement无关。
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部