首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议109:比较innerHTML与标准DOM方法

关灯直达底部

在更新页面时,是使用不标准的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的差异并不大,应当根据代码可读性、可维护性、团队习惯,以及代码风格来综合决定采用哪种方法。