Question

有没有办法更快地更新屏幕？我正在向表中写入1000行，但似乎电子，webkit或其他东西无法快速渲染。一旦数据被告知写入，它就需要几秒钟才能显示在屏幕上。

我不确定是否是我的代码或电子/节点/ webkit使它变慢。也许jquery很慢？

这是我正在做的事情：

var tbody = $('#results-table-data>tbody');

for (var i = 0; i < rows.length; i++) {
    var item = rows[i];
    var row = $('<tr>');
    for (var j = 0; j < fields.length; j++) {
        var field = fields[j].name;
        var value = item[field] === null ? '(null)' : item[field];
        row.append('<td class="data-' + getTypeClass(columnTypes[j], item[field]) + '">' + value + '</td>');
    }
    tbody.append(row);
}

Answer 1

嵌套for循环效率不高，但有时是必要的。你可以做一件事来加快它的速度是缓存长度和数组访问器：这对1000条记录来说不会是一个巨大的改进，但它会有所帮助。

 var tbody = $('#results-table-data>tbody');
for (var i = 0, rowsLength = rows.length; i < rowsLength; i++) {
    var item = rows[i];
    var row = $('<tr>');

    for (var j = 0, fieldsLength = fields.length; j < fieldsLength; j++) {
        var field = fields[j].name;
        var value = item[field] === null ? '(null)' : item[field];
        row.append('<td class="data-' + getTypeClass(columnTypes[j], item[field]) + '">' + value + '</td>');
    }
    tbody.append(row);
}

您可以在此处查看循环时间的比较： https://jsperf.com/caching-array-length/4

Answer 2

是的，这是正常的，你在for循环中调用tbody.append（），只执行一次（完成所有操作后会更快）。

退出tbody.append（行）;来自foreach内部。您可以添加一个名为rowsArray = []的新变量;并在那里插入所有内容。

您的代码示例（我无法测试它，因为我们没有您的所有代码，但您明白了）：

var tbody = $('#results-table-data>tbody');
var aRows = [];
var rowsLength = rows.length;

for (var i = 0; i < rowsLength; i++) {
    var item = rows[i];
    var row = $('<tr>');
    for (var j = 0; j < fields.length; j++) {
        var field = fields[j].name;
        var value = item[field] === null ? '(null)' : item[field];
        row.append('<td class="data-' + getTypeClass(columnTypes[j], item[field]) + '">' + value + '</td>');
    }
    aRows.push(row);

    if( rowsLength == ( i+1 ) ){
        tbody.append( rowsLength );
    }
}

渲染到表的1,000行很慢

2 个答案: