操作大型 HTML 表格 (千列以上) 顯示/隱藏特定欄位時，DOM 存取方式直接決定效能。本文實測 table.rows[i].children[colIdx] 與 table.rows[i].cells[colIdx] 的效能差異，揭示最佳實踐。
測試場景
- 建立 1000 列 × 3 欄表格 (
createTable(1000))。
- 隱藏/顯示第 2 欄 (索引 1)，測量耗時。
- 關鍵程式碼片段：
var table = tableBox.children[0]; // 取得 table 元素
var rowsLen = table.rows.length;
for (var i = 0; i < rowsLen; i++) {
var tr = table.rows[i];
tr.children[colIdx].style.display = isShow ? "" : "none"; // 核心操作
}
實測結果 (1000 列)
| 操作 | 耗時 (毫秒) | 備註 |
|---|
| 隱藏欄位 | ~15-25 ms | 視瀏覽器引擎而定 |
| 顯示欄位 | ~10-20 ms | 略快於隱藏 |
效能關鍵點分析
- 使用
table.rows 集合：直接存取 `` 陣列，避免遍歷所有子節點。
tr.children[colIdx] vs tr.cells[colIdx]：
children：僅包含元素節點 (Element nodes)，索引對應可見欄位，速度較快。cells：HTMLTableRowElement 專屬集合，語意較清晰但內部實現可能額外過濾，微慢。
- 快取
table.rows.length：避免迴圈中重複存取屬性。
- 批次操作 style.display：現代瀏覽器會批次重排，但極大表格仍建議使用
DocumentFragment 或 CSS 類別切換 (tr.classList.add('hide-col-1')) 進一步優化。
進階優化建議
// CSS 類別切換法：將樣式規則寫入 CSS，JS 僅切換類別
// CSS
tr.hide-col-1 > td:nth-child(2) { display: none; }
// JS
for (var i = 0; i < rowsLen; i++) {
table.rows[i].classList.toggle('hide-col-1', !isShow);
}
// 優點：將重排/重繪交給瀏覽器優化，大表格效能顯著提升
總結
大型表格欄位切換首選 table.rows[i].children[colIdx]，配合長度快取與 CSS 類別切換可達最佳效能。避免使用 getElementsByTagName、querySelectorAll 等全域查詢，並善用瀏覽器開發者工具 Performance 面板進行實測驗證。
- 上一篇文章： ASP.NET 頁面動態編譯全過程解析：從 .aspx 到動態類別的誕生
- 下一篇文章： .NET 定時任務效能大比拚：Thread.Sleep vs System.Timers.Timer
Copyright ©
程式碼之家 All Rights Reserved
