Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

往元素中写入文本的几种方法效率比较

  由于所有的浏览器都兼容innerHTML这个属性,所以偷懒的人总是喜欢用innerHTML写入文本。但是,如果只是为了写入文本而用innerHTML那就太奢侈了。现在,我们有这样一个简单的HTML。 <div id="panel"></div>
<script>
var MAX=1E5;
var panel,i,t;
panel=document.getElementById("panel");
//其它代码
</script>
下面这个代码是测试innerHTML的效率。 t=new Date;
for(i=0;i<MAX;i++)
  panel.innerHTML=i;
alert(new Date-t);

  这个效率不怎么样吧,Chrome和FF都要半秒以上才能完成。IE就更夸张了,直接跑到13秒。所以,如果没有特殊需求就别图方便使用innerHTML去写入文本。那应该用什么呢?其实方法有好多的。我们先来看看textContent t=new Date;
for(i=0;i<MAX;i++)
  panel.textContent=i;
alert(new Date-t);

  效率比刚刚高了许多吧,虽然IE下还是有点不给力,不过这个方法确实可以凑合着用了。但是这个方法不兼容低版本的IE,所以遇到低版本的IE要用另一个方法,那就是innerHTML。这个innerHTML在IE9和Chrome中也是可以被兼容的,下面我们来测试一下它。 t=new Date;
for(i=0;i<MAX;i++)
  panel.innerText=i;
alert(new Date-t);

  这回IE丢人可以丢到家了,innerText本来是IE的东西,而innerText的效率IE居然不如Chrome。更讽刺的是在IE下textContent都比innerText的效率高。而Chrome也来幽默了一回。在Chrome中innerText的效率比textContent的略高,Chrome显然是在调戏IE←_←,我猜FF都躲在一旁偷笑了。
  元素写入文本的效率就到此终结了吗?没有,我们还有最终兵器文本节点。可不要小看它,平时操作HTML文档的时候一般不会刻意去操作文本节点,但是别忘了文本节点的存在就是为了操作文本用的。既然有专业的,为什么我们要让业余的去做呢? var text=document.createTextNode("");
panel.appendChild(text);
t=new Date;
for(i=0;i<MAX;i++)
  text.data=i;
alert(new Date-t);

  虽然文本节点的效率不会比textContent和innerText高太多,但是只是这个方法是可以全兼容的。如果使用textContent还必须去调整浏览器兼容性,那多麻烦啊。使用文本节点还有一个好处就是可以对文本做附加操作,用appendChild附加一个文本节点就可以在一段文字后面添加一段文字。如果使用普通的方法就必须读出全部文字,加上需要的文字后再写回去。那种蛋疼的操作明显是要和合科学发展观对着干。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^