【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”
document.createElement("div") 与 document.write("<div></div>") 这两种方式哪种方式的效率更高一点?为什么?
我的理解是,针对这里的代码而言,
createElement()是创建一个节点,还没有引起图像渲染,只存在于内存,页面内容暂时没有改变。
document.write()之后页面内容引起改变,引起图像渲染。
前者有类似“双缓冲”的作用,添加其他属性、式样和textnode之后再添加到指定的父节点上再渲染,后者直接加在末尾或者取代当前的内容(trident/gecko/webkit有别)马上渲染。
说效率,要看具体是什么效率了。
基本上,这两个是等同的。因为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秒
我的理解是,针对这里的代码而言,
createElement()是创建一个节点,还没有引起图像渲染,只存在于内存,页面内容暂时没有改变。
document.write()之后页面内容引起改变,引起图像渲染。
前者有类似“双缓冲”的作用,添加其他属性、式样和textnode之后再添加到指定的父节点上再渲染,后者直接加在末尾或者取代当前的内容(trident/gecko/webkit有别)马上渲染。
说效率,要看具体是什么效率了。
这点细微差别 人还能感觉到?
基本上,这两个是等同的。因为javascript的处理过程是单线程的,所以在一段javascript执行完成之前,浏览器基本上不做页面的渲染操作,所以上面两条语句在执行渲染之前都需要处理DOM,然后根据DOM来进行渲染。尝试运行下面的页面,可以看到两者执行效率其实是差不多的。
引用来自“MUTEX”的答案
基本上,这两个是等同的。因为javascript的处理过程是单线程的,所以在一段javascript执行完成之前,浏览器基本上不做页面的渲染操作,所以上面两条语句在执行渲染之前都需要处理DOM,然后根据DOM来进行渲染。尝试运行下面的页面,可以看到两者执行效率其实是差不多的。
这代码明显第二种慢很多
在我电脑 ie7 write方式在1秒内,create方式用2秒