让我再次想起这个问题源于前面的一次面试,记得当时问我的一个问题是“创建节点选用哪种方式比较好”,我当时的回答是:IE下面innerHTML效率更高,而非IE浏览器下面则是createElement更好。可是,面试官觉得我的结论是不正确的,“在各种浏览器下面,innerHTML都要比createElement效率更高的”!
把回来后的一趟子事完成后,开始着手证明一下,其实,我当时回答的也不是没有“证据”,因为我在一个前端博客(DOM操作的性能优化)上面看到这样的结论:“appendChild和innerHTML的效率也是要分浏览器来考虑到,IE浏览器操作innerHTML的效率非常高,而FF和Opera会慢些,尤其是FF,当innerHTML内部元素很多的时候效率极低,毕竟innerHTML是IE首创并发扬光大的。所以可以这么讲:IE的innerHTML效率优于appendChild,而Firefox则是相反。。。”,可惜当时自己看到这样的结论却没有做测试,无demo,无真相啊!
好了,下面是我的三个测试code:
<body>
<div id="container"></div>
<input type="button" value="start" onclick="init()" />
</body>
CODE1:
function init(){
var staDate = new Date();
var container = document.getElementById("container");
for(var i=0;i<500;i++){
var str="<div>test</div>";
container.innerHTML += str;
}
alert(new Date - staDate);
}
CODE2:
function init(){
var staDate = new Date();
var container = document.getElementById("container");
for(var i=0;i<500;i++){
var odiv = document.createElement("div");
var otext = document.createTextNode("text");
odiv.appendChild(otext);
container.appendChild(odiv);
}
alert(new Date - staDate);
}
CODE3:
function init(){
var staDate = new Date();
var container = document.getElementById("container");
var arr = [];
for(var i=0;i<500;i++){
var str="<div>test</div>";
arr.push(str);
}
container.innerHTML = arr.join("");
alert(new Date - staDate);
}
下面是某一次测试得出的数据:
IE7: 3469 109 16
FF: 6072 35 14
Chrome: 3170 3 2
可以看出,第一个程序耗时很大一部分是由于字符串的连接操作造成的,这个问题我以前探讨过:也说说JavaScript字符串连接的效率,另外,innerHTML的效率(耗时)比createElement再append要高!
更改程序,再次验证:
CODE4:
//在代码2的基础上增加一个数量节
function init(){
var staDate = new Date();
var container = document.getElementById("container");
for(var i=0;i<5000;i++){
var odiv = document.createElement("div");
var otext = document.createTextNode("text");
odiv.appendChild(otext);
container.appendChild(odiv);
}
alert(new Date - staDate);
}
CODE5:
//比代码3更严谨,只计算操作innerHTML的时间
function init(){
var container = document.getElementById("container");
var arr = [];
for(var i=0;i<5000;i++){
var str="<div>test</div>";
arr.push(str);
}
var str = arr.join("");
var staDate = new Date();
container.innerHTML = str;
alert(new Date - staDate);
}
IE7: 922 78
FF: 372 144
Chrome: 32 28
看来,IE浏览器操作innerHTML的效率确实非常高,当innerHTML内容很多时,IE效率比FF高,“毕竟innerHTML是IE首创并发扬光大的”,不过,innerHTML的效率显然还是比createElement和append要高!
看来,面试官的结论是正确的,在敬佩的同时对自己当时不作测试感到惋惜!
最后,感谢zhubiao大哥在百忙中抽出时间和我讨论,让我知道“innerHTML属于‘静态’的操作,消耗内存小一点。creatElement相比之下会更消耗内存…”
文章结尾,附上网上一些大牛对这个问题的探讨:
PPK:Benchmark - W3C DOM vs. innerHTML
Dustindiaz:innerHTML and DOM Methods
怿飞:通过 Dom 方法提高 innerHTML 性能
文章来源:http://www.iteye.com/topic/500009
分享到:
相关推荐
最近遇到js的效率问题,是关于在页面中新增元素的问题。 假设我们有页面如下: 复制代码 代码如下: <HTML> <HEAD> </HEAD> <BODY> ”div1″></div> </BODY> [removed] // 脚本位置 ...
博文链接:https://aideqianfang.iteye.com/blog/246585
js中innerHTML与innerText的用法与区别
innerHTML的简单应用
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
Innerself – 使用innerHTML将React / Redux转换成50行代码
简单日历和innerHTML使用 javascript的简单应用实例 可以自定义Css
千锋Web前端教程_48_日期对象_定时器和innerhtml
解决ajax返回innerHTML中javascript不能运行问题
超全面javaweb第4天-_08_innerHTML属性
InnerHtml和InnerText的区别分析小结
NULL 博文链接:https://wuzhengxuan.iteye.com/blog/1263906
js中innerHTML与innerText的用法与区别js中innerHTML与innerText的用法与区别
innerHTML-outerHTML-innerTEXT
var tbody=document.createElement(‘tbody’); tbody[removed]='<tr><td>IE下tbody的innerHTML是只读的</td></tr>’; //在IE下报错,目标对象错误 现在用jquery的html试试, 代码如下: $(tbody).html(‘<tr>...
HTML标签的innerHTML和value之间的用法的区别
利用innerHTML代替createElement来动态添加网页内容已成为一种普遍的认识。但在商务应用,大数据的datagrid屡见不鲜,就算是innerHTML也捉襟见肘,于是人们又开发了分时加载的技术了(利用setTimeout)。
多数现代浏览器都实现了innerHTML操作,它的方便性让我们爱不释手,但如果使用不当,很容易出现效率问题,本文通过一个例子来说明如何优化innerHTML操作。
innerHtml用法innerHtml用法innerHtml用法innerHtml用法