Javascript：在 DOM 中异步生成大表。答案

【问题标题】：Javascript: Generate large table in DOM asynchronously.Javascript：在 DOM 中异步生成大表。
【发布时间】：2014-01-05 04:31:38
【问题描述】：

我正在尝试在 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 方法在卡盘中构建表......）。

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

【问题讨论】：

可能值得尝试使用document.createElement 而不是字符串来生成表。它可能会表现得更好。代码仍然会生成超过一百万个 td 元素，我真的不明白你为什么需要它。
几个问题： 1) 你总是知道桌子的尺寸吗？如果是这样，为什么不静态生成呢？ 2）桌子是做什么用的？ 3）只有IE 9有这个问题吗？其他浏览器会展示它吗？ 4) 你的 HTML 是什么样的？
@GEORGESTOCKET 是的，我会知道桌子的大小。我无法静态生成它，因为我必须在绘制每个单元格时评估几件事。此外，我从服务器获取表的数据作为 2D 数组。

标签： javascript performance asynchronous settimeout

【解决方案1】：

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

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

【讨论】：

如果表格在开始时设置为固定，然后在完成添加数据后，可以将其删除。从技术上讲，它应该会更好，但是一旦完成，它就会在视觉上结结巴巴。

【解决方案2】：

这是我编写的代码。此代码以块的形式添加表中的行，因此浏览器不会挂起。

<script>
        $(document).ready(function() {
            $("#generateTable").click(function() {
                generateTable();
            });
        });

        function generateTable() {
        // Initialize a few things here...

        var batchSize = 2;
        var rowNum = 365;
        var totalRow = 0;
        $('#reportTable').hide();

        var buildTableAsync = function(batchSize) {
            var content;
            var processedRow = 0;

            while (processedRow < batchSize) {
                content += "<tr>";
                for ( var i = 0; i < 1500; i++) {
                    content += '<td>' + i + '</td>';
                }
                content += "</tr>";
                processedRow++;
                totalRow++;
            }
            $('#reportTable').append(content);
            if (totalRow < rowNum) {

                setTimeout(function() {
                    doOneFactorialStep(batchSize);
                }, 1);
            } else {

            $('#reportTable').show();
            }
        };
        buildTableAsync(batchSize);
    }
    </script>

【讨论】：