建議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的差異並不大，應當根據代碼可讀性、可維護性、團隊習慣，以及代碼風格來綜合決定採用哪種方法。