Javascript:异步生成DOM中的大型表。

Question

我试图在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);
        }
    }

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

如何使generateTable()调用异步？

Answer 1

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

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

Answer 2

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

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