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

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

$(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);
        }
    }

$（文档）.ready（函数（）{
$（“#generateTable”）。单击（函数（）{
generateTable1（）；
});
});
函数generateTable（）{
$（'#sampletable'）.html（“”）；
试一试{
var content=“”
对于（j=0；j<360；j++）{
内容+=''；
对于（i=0；i<3000；i++）{
内容+=''+j+''；
}
内容+=''；
}
内容+=“”
$（'#sampletable'）.html（内容）；
}捕捉（错误）{
警惕（err）；
}
}

正如所料，IE在创建此表时被阻塞/挂起。所以我想使用JavaScript asyn模式异步创建这个表（我想使用settimeout方法在Chuck中构建表…）

---

如何使此generateTable（）调用异步

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

---

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

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

<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>

$（文档）.ready（函数（）{
$（“#generateTable”）。单击（函数（）{
可生成（）；
});
});
函数generateTable（）{
//在这里初始化一些东西。。。
var-batchSize=2；
var-rowNum=365；
var totalRow=0；
$（'#reportTable'）.hide（）；
var buildTableAsync=函数（batchSize）{
var含量；
var processedRow=0；
while（processedRow

尝试使用

document.createElement

而不是字符串生成表可能是值得的。它可能会表现得更好。代码仍然会生成超过一百万个

td

元素，我真的不明白您为什么需要这些元素。几个问题：1）您总是知道表的大小吗？如果是，为什么不静态生成它？2） 这张桌子是用来做什么的？3） 只有IE9有这个问题吗？其他浏览器会展示它吗？4） 你的HTML是什么样子？@GEORGESTOCKET是的，我会知道表格的大小。我不能静态地生成它，因为在绘制每个单元格时，我必须评估几个东西。更详细地说，我正在从服务器获取作为2D数组的表的数据。如果表在开始时设置为fixed，然后在完成添加数据时，可以删除该表。从技术上讲，它应该做得更好，但一旦完成，它就会在视觉上结巴。