[优化]innerHTML和appendChild哪个性能更高

分类:Javascript| 发布:camnprbubuol| 查看: | 发表时间:2013/7/15

var html = '<div>dom</div>', body.innerHTML=html;var div = document.createElement('div'), txt = document.createTextNode('dom'); div.appendChild(txt); 哪种方式好?

关于代码的优化,有时候要针对不同的浏览器。 上边innerHTML和appendChild哪个好呢?
在ie下,appendChild略胜于innerHTML。 在chrome等webkit核的浏览器下, innerHTML优胜于appendChild。下边我们来用在线测试来说明一下:(JS性能测试工具推荐:jsperf

IE下的测试:

ie jsperf

Chrome下的测试:

测试结果:

chrome jsperf

ie下两者相差0.004s,可以忽略不计。
chrome下两者相差0.868s。 innerHTML 完胜 appendChild/createElement

总结:尽量少用createElement/apprendChild 这都是ie的东东。

我想自己测试一下,请猛击:http://jsperf.com/createelement-vs-innerhtml

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/javascript/innerhtml-and-appendchild-which-performance-is-higher.html