javascript - 渲染到表中的 1,000 行速度很慢

Question

有没有办法更快地更新屏幕？我正在向表中写入 1000 行，但似乎 Electron、WebKit 或其他东西渲染速度不够快。一旦数据被告知写入，它需要几秒钟的时间才能显示在屏幕上。

我不确定是我的代码还是 electro/node/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