table表格的操作有兩種方法，一種是標準的Table對象方法：
詳見w3c school
http://www.w3school.com.cn/htmldom/dom_obj_table.asp
還有一種方法就是標準的DOM操作方法。只是將table看成一個普通的DOM元素來操作。兩種方法都寫一個代碼在表格中增加100*100個單元格。
<table border="1" id="table1" bordercolor="#000" style="border-collapse:collapse;"></table>
代碼一：使用Table對象
//使用table自帶的方法操作
var table1= document.getElementById("table1")
for (var i=0;i<100 ; i++){
var row = table1.insertRow(-1);
for (var j=0;j<100 ; j++){
var cell = row.insertCell(-1);
cell.innerHTML=(new Date()).getTime();
}
}
代碼二：使用DOM操作:
var f = document.createDocumentFragment();
for (var i=0;i<100 ; i++){
var tr = document.createElement("tr");
for (var j=0;j<100 ; j++){
var td = document.createElement("td");
var text = document.createTextNode((new Date()).getTime());
td.appendChild(text);
tr.appendChild(td);
}
f.appendChild(tr);
}
document.getElementById("tbody1").appendChild(f);
我先測試了一下兩種方法的運行性能。我力求用性能最好的DOM操作方法去操作table。粗略的測試出的數據
|
Internet Explorer 8 |
FireFox 3.6.13 |
Chrome 8 |
Safari 5 |
Opera 10 |
| 使用DOM操作 |
1204ms |
380ms |
62ms |
170ms |
174ms |
| 使用table操作 |
14719ms |
2404ms |
423ms |
199ms |
357ms |
使用DOM的操作性能顯然要比Table對象操作要快。我之所以去測試是擔心是否是原生的Table方法操作起來性能更好。從上面的數據明顯可以說明。Table對象的方法其實也是DOM操作。影響性能的還是取決于頁面重繪的次數。顯然使用insertRow和inertCell也會導致頁面重繪。100*100次重繪。而使用DOM Fragment。頁面只重繪了1次。
測試不同瀏覽器的耗時是想看看各種瀏覽器對Table對象的方法支持情況，還好，都支持。當然還是要惡心一下IE，誰叫他老是最慢。
從代碼上來看使用Table標準方法的代碼比DOM操作的代碼要簡潔直觀一些。
總的來說，對于少量的表格操作，可以使用Table對象自帶的方法來操作，對于大量的Table操作還是要使用最優的DOM操作。至于什么是最優的DOM操作。強烈推薦大家去看看
High Performance JavaScript這本書"