Javascript:在 DOM 中异步生成大表。

Question

我正在尝试在 IE 9 中创建一个大表，单击按钮时使用以下代码。

$(document).ready(function() {
        $("#generateTable").click(function() {
            generateTable1();
        });
    });

    function generateTable() {

    $('#sampletable').html("");
        try {
            var content = "<table border=1>"

            for (j = 0; j < 360; j++) {

                content += '<tr>';
                for (i = 0; i < 3000; i++) {
                    content += '<td>' + j + '</td>';
                }
                content += '</tr>';

            }

            content += "</table>"
            $('#sampletable').html(content);
        } catch (err) {
            alert(err);
        }
    }

正如预期的那样，IE 在创建此表时被阻塞/挂起。所以我想使用 JavaScript asyn 模式异步创建此表(我想使用 settimeout 方法在 chucks 中构建表...)。

如何使这个 generateTable() 调用异步？

Answer 1

渲染表格可能是导致性能不佳的原因，而不是它的生成。如果您异步执行此操作，则可能会使情况变得更糟，因为浏览器需要不断运行表格列大小调整算法并回流和重新绘制表格(尽管这可能比导致长时间运行的脚本警告更好)。

尝试使表格固定布局并明确设置列的宽度，这样它就不必运行列大小调整。分页是一种选择吗？很确定没有人会想一次看到一百万个细胞。您还可以查看执行虚拟滚动的插件。