在更新页面时,是使用不标准的innerHTML属性,还是使用纯DOM方法(如document.createElement)?如果不考虑标准问题,它们的性能如何?
两者性能基本相近,不过在几乎所有浏览器中,innerHTML速度更快一些,但最新的基于WebKit的浏览器(Chrome和Safari)除外。
例如,分别使用两种方法来创建一个1000行的表格。构造一个HTML字符串,然后更新DOM的innerHTML属性。使用innerHTML创建表格的代码如下:
function tableInnerHTML{
var i,h=[/'<table border=/"1/">/'];
h.push(/'<thead>/');
h.push(/'<tr><th>id</th><th>yes?</th><th>name</th><th>url</th><th>action</th></tr>/');
h.push(/'</thead>/');
h.push(/'<tbody>/');
for(i=1;i<=1000;i++){
h.push(/'<tr><td>/');
h.push(i);
h.push(/'</td><td>/');
h.push(/'And the answer is.../'+(i%2?/'yes/':/'no/'));
h.push(/'</td><td>/');
h.push(/'my name is#/'+i);
h.push(/'</td><td>/');
h.push(/'<a href=/"http://example.org//'+i+/'.html/">http://example.org//'+i+/'.html</a>/');
h.push(/'</td><td>/');
h.push(/'<ul>/');
h.push(/'<li><a href=/"edit.php?id=/'+i+/'/">edit</a></li>/');
h.push(/'<li><a href=/"delete.php?id=/"/'+i+/'-id001/">delete</a></li>/');
h.push(/'</ul>/');
h.push(/'</td>/');
h.push(/'</tr>/');
}
h.push(/'</tbody>/');
h.push(/'</table>/');
document.getElementById(/'here/').innerHTML=h.join(/'/');
};
下面通过DOM标准方法document.createElement和document.createTextNode创建同样的表,代码有些较长。
function tableDOM{
var i,table,thead,tbody,tr,th,td,a,ul,li;
tbody=document.createElement(/'tbody/');
for(i=1;i<=1000;i++){
tr=document.createElement(/'tr/');
td=document.createElement(/'td/');
td.appendChild(document.createTextNode((i%2)?/'yes/':/'no/'));
tr.appendChild(td);
td=document.createElement(/'td/');
td.appendChild(document.createTextNode(i));
tr.appendChild(td);
td=document.createElement(/'td/');
td.appendChild(document.createTextNode(/'my name is#/'+i));
tr.appendChild(td);
a=document.createElement(/'a/');
a.setAttribute(/'href/',/'http://example.org//'+i+/'.html/');
a.appendChild(document.createTextNode(/'http://example.org//'+i+/'.html/'));
td=document.createElement(/'td/');
td.appendChild(a);
tr.appendChild(td);
ul=document.createElement(/'ul/');
a=document.createElement(/'a/');
a.setAttribute(/'href/',/'edit.php?id=/'+i);
a.appendChild(document.createTextNode(/'edit/'));
li=document.createElement(/'li/');
li.appendChild(a);
ul.appendChild(li);
a=document.createElement(/'a/');
a.setAttribute(/'href/',/'delete.php?id=/'+i);
a.appendChild(document.createTextNode(/'delete/'));
li=document.createElement(/'li/');
li.appendChild(a);
ul.appendChild(li);
td=document.createElement(/'td/');
td.appendChild(ul);
tr.appendChild(td);
tbody.appendChild(tr);
}
tr=document.createElement(/'tr/');
th=document.createElement(/'th/');
th.appendChild(document.createTextNode(/'yes?/'));
tr.appendChild(th);
th=document.createElement(/'th/');
th.appendChild(document.createTextNode(/'id/'));
tr.appendChild(th);
th=document.createElement(/'th/');
th.appendChild(document.createTextNode(/'name/'));
tr.appendChild(th);
th=document.createElement(/'th/');
th.appendChild(document.createTextNode(/'url/'));
tr.appendChild(th);
th=document.createElement(/'th/');
th.appendChild(document.createTextNode(/'action/'));
tr.appendChild(th);
thead=document.createElement(/'thead/');
thead.appendChild(tr);
table=document.createElement(/'table/');
table.setAttribute(/'border/',1);
table.setAttribute(/'width/',/'100%/');
table.appendChild(thead);
table.appendChild(tbody);
document.getElementById(/'here/').appendChild(table);
};
使用innerHTML的好处在早期的浏览器上是显而易见的(在IE 6中使用innerHTML要比使用DOM快三四倍),但在最新版本的浏览器上就不那么明显了。而在最新的基于WebKit的浏览器上结果正好相反,使用DOM方法更快。因此,采用哪种方法将取决于用户经常使用的浏览器,以及个人的编码偏好。
要在一个性能苛刻的操作中更新一大块HTML页面,innerHTML在大多数浏览器中执行得更快。但对于大多数日常操作而言,使用innerHTML和使用DOM的差异并不大,应当根据代码可读性、可维护性、团队习惯,以及代码风格来综合决定采用哪种方法。