如何提升IE11中渲染大量表格数据时jQuery replaceWith()的性能？

我之前在维护兼容IE11的项目时，也踩过大量表格数据渲染的坑——你遇到的1700行数据渲染耗时极久，核心问题在于一次性拼接超大规模HTML字符串再插入DOM，IE11的DOM解析引擎处理这种大字符串时效率极低，再加上replaceWith本身的DOM替换开销，直接把主线程堵死了。

下面给你几个经过实战验证的优化方案，亲测能大幅降低IE11下的渲染耗时：

方案1：分批插入DOM，避免一次性加载所有内容 #

IE11一次性处理上千个DOM节点时，会长时间占用主线程导致页面卡顿。我们可以把数据分成小批次，利用requestAnimationFrame在浏览器重绘的间隙插入每一批数据，让浏览器有时间处理其他UI任务：

function renderTable(tableData) {
    const $tbody = $('#data-results > tbody');
    $tbody.empty(); // 先清空旧内容，比replaceWith更轻量
    const batchSize = 50; // 每批插入50行，可根据实际情况调整
    let currentRow = 0;

    function insertBatch() {
        const endRow = Math.min(currentRow + batchSize, tableData.length);
        const rowMarkups = [];
        
        // 用数组收集每行HTML，比直接+=拼接字符串更高效
        for (; currentRow < endRow; currentRow++) {
            const colMarkups = [];
            for (let col = 0; col < tableData[currentRow].length; col++) {
                colMarkups.push(`<td>${tableData[currentRow][col]}</td>`);
            }
            rowMarkups.push(`<tr role="row">${colMarkups.join('')}</tr>`);
        }
        
        $tbody.append(rowMarkups.join(''));
        // 如果还有剩余数据，在下一帧继续插入
        if (currentRow < tableData.length) {
            requestAnimationFrame(insertBatch);
        }
    }

    insertBatch();
}

方案2：使用DocumentFragment减少DOM重排 #

DocumentFragment是内存中的DOM容器，把所有节点先放到Fragment里，最后一次性插入DOM，只会触发一次重排，比多次append效率高很多。而且IE11对createElement的处理效率反而比解析大HTML字符串更高：

function renderTable(tableData) {
    const $tbody = $('#data-results > tbody');
    $tbody.empty();
    const fragment = document.createDocumentFragment();

    for (let row = 0; row < tableData.length; row++) {
        const tr = document.createElement('tr');
        tr.setAttribute('role', 'row');
        
        for (let col = 0; col < tableData[row].length; col++) {
            const td = document.createElement('td');
            td.textContent = tableData[row][col]; // 用textContent避免HTML注入，也更高效
            tr.appendChild(td);
        }
        
        fragment.appendChild(tr);
    }

    $tbody.append(fragment);
}

方案3：优化字符串拼接方式 #

你原代码里用+=拼接超长字符串，在IE11里会频繁创建新字符串对象，带来额外性能损耗。改用数组收集每一段HTML，最后调用join('')拼接，能显著提升字符串处理速度：

// 替代原有的字符串拼接逻辑
const rowMarkups = [];
for (var row = 0; row < table.length; row++) { 
    const colMarkups = [];
    for (var col = 0; col < table[0].length; col++) { 
        colMarkups.push(`<td>${table[row][col]}</td>`);
    }
    rowMarkups.push(`<tr role="row">${colMarkups.join('')}</tr>`);
}
const markup = `<tbody>${rowMarkups.join('')}</tbody>`;
$('#data-results > tbody').replaceWith(markup);

总结 #

IE11的DOM性能天生弱于现代浏览器，优化的核心思路就是：

• 减少单次DOM操作的节点数量（分批插入）
• 降低DOM重排的次数（用DocumentFragment）
• 优化字符串拼接的效率（数组join代替+=）

你可以根据自己的场景组合这些方案，比如「分批插入+数组join」或者「DocumentFragment+分批」，都能有效把1700行数据的渲染时间压缩到可接受的范围。

内容的提问来源于stack exchange，提问作者SMH