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