Question

我有一段代码循环并将数据附加到html表

for(var i = 0; i < iRowCount; i++)
    {
        var sTempVal = aAdditionValues[i];
        var iStartColumn = 0;
        var iIndex = 0;

        var aTempVal = sTempVal.split("");          
        aTempVal.reverse();
        for(var r = iColCount - 1; r > 0; r--)
        {
            $("#additionTable tr:eq("+i+") td:eq("+r+")").append(aTempVal[iIndex]);             
            iIndex++;
        }
        iStartColumn = 0;
        iIndex = 0;
    }

数组aAdditionValues[i];只是一个数组数组。

我是否可以实施任何性能增强？

Answer 1

现在你在每个循环中向DOM添加一些东西，这是非常低效的。首先创建要在JavaScript中插入的对象，然后将其添加到DOM中，将其插入到一个事件中。这将最小化重新绘制文档所需的计算。

Answer 2

小改进：你至少可以摆脱aTempVal.reverse();并从最后开始循环。

同时删除iStartColumn您没有更改该值。

Answer 3

由于您操纵现有表格的某些单元格，因此没有太多改进空间。我建议至少缓存jquery选择器：

var $table = $('#additionTable'); // outside the loop ofc
$("tr:eq("+i+") td:eq("+r+")", $table).append(/* ... */);

Answer 4

每次向DOM添加内容时，都会重新构建它，并且需要大量资源。通过createElement("table")填充它会更快创建表格，然后才能执行append。

将数据附加到页面时的jQuery性能

4 个答案: