AJAX 定時輪詢更新表格資料：避免重複建立 DOM 的高效能模式

問題核心

每分鐘輪詢後端 API，若每次都 $('#table').html('') 重建整張表格，會導致：

• 閃爍、捲軸位置重置、輸入焦點遺失。
• 大量 DOM 操作造成主執行緒阻塞。
• 事件綁定 (如按鈕 click) 失效需重綁。

最佳實踐：虛擬 DOM 概念 / 差異更新

核心原則：結構不變，只更新內容。

實作模式 A：jQuery 就地更新

function refreshTable() {
    $.getJSON('/api/data', function(rows) {
        // 1. 表格骨架已存在於 HTML，僅更新 tbody
        var $tbody = $('#dataTable tbody');
        
        // 2. 建立映射：現有行 ID → 行元素 (假設第一欄為唯一 ID)
        var existingRows = {};
        $tbody.find('tr[data-id]').each(function() {
            existingRows[$(this).data('id')] = this;
        });
        
        // 3. 遍歷新資料，更新或建立
        rows.forEach(function(row) {
            var tr = existingRows[row.id];
            if (tr) {
                // 更新現有行
                $(tr).find('td:eq(1)').text(row.name);
                $(tr).find('td:eq(2)').text(row.value);
                // 標記已處理
                delete existingRows[row.id];
            } else {
                // 新增行
                var html = '<tr data-id="' + row.id + '">' +
                           '<td>' + row.id + '</td>' +
                           '<td>' + row.name + '</td>' +
                           '<td>' + row.value + '</td>' +
                           '</tr>';
                $tbody.append(html);
            }
        });
        
        // 4. 移除舊資料中已不存在的行
        $.each(existingRows, function(id, tr) {
            $(tr).remove();
        });
    });
}

// 初始化：首次載入建立骨架
$(function() {
    refreshTable();
    setInterval(refreshTable, 60000); // 每分鐘
});

實作模式 B：現代框架 — Vue/React 自動 Diff

框架內建 Virtual DOM Diff，開發者只需維護資料陣列，DOM 更新自動最小化。

關鍵優化細節

1. 唯一 Key：`` 或 `:key="row.id"`，讓演算法精準匹配。
2. 僅更新變更欄位：比對舊值，相同則跳過 .text() 寫入。
3. 批次 DOM 讀寫分離：先讀取所有舊值，再一次性寫入，避免強制回流。
4. 防抖/取消舊請求：使用 AbortController 或旗標避免競態條件。