jQuery:当重复调用时，重绘函数的速度非常慢

jQuery: redrawing function extremely slow when called repeatedly

本文关键字：函数 速度 非常 调用 jQuery      更新时间：2023-09-26

我有一个名为refreshHistory（）的方法，它基本上读取本地存储的json列表（使用https://github.com/marcuswestin/store.js/)并按照它们存储的顺序填充列表。

每次用户操作发生时，都会调用此方法。但是，随着列表越来越大，浏览器的速度会减慢到爬行。

function refreshHistory() {
    var records = typeof store.get('history') == "undefined" ? 0 : store.get('history').history;
    ;
    if (records == 0) {
        $('#content #historyView').html('<i>history show up here in order.</i>');
    } else {
        var xhistory = '<div id="history">';
        for (var i = 0; i < records.length; i++) {
            var xaction = records[i]
            xhistory += '<div id="action">' + (i + 1) + '. ' + '<b>' + xaction.action + "</b> " + xaction.caption + '<span class="delaction" id=' + i + ' data-stamp="' + xaction.msg + '" style="color:red;cursor:pointer;">' + '[remove]' + '</span></div>'
        }
        xhistory += "</div>"
        $('#qtip-0-content #historyView').html(xhistory);
    }
}

在每个事件上渲染所有内容是一种简单的策略，这很好，但它确实会遇到您所描述的性能问题。很难给出具体的建议，但你也可以：

  • 实现更详细的呈现逻辑，其中只呈现新项并将其添加到DOM中
  • 使用ReactJs或Virtual DOM库，它们允许您的代码使用render everything模式，但通过执行所需的最少操作，使DOM的实际更新更快

真正提高效率的唯一方法是以不同的方式实现它。

我个人一直在使用knockout.js，对此我很满意。基本上，你写一个模板，库处理DOM节点的更改，只更新所需的部分。你需要学习如何以稍微不同的方式思考，但也有一些很棒的教程。

也就是说，你可以尝试的一个简单技巧是将选择器移到函数之外，这样它们只运行一次，而不是每次调用函数时。

为了保持理智，无论.get('history')是否返回undefined，我都会将records变量保持为相同的类型。

var contentHistoryView = $('#content #historyView');
var qtipHistoryView = $('#qtip-0-content #historyView');
function refreshHistory() {
    var records = typeof store.get('history') == "undefined" ? [] : store.get('history').history;
    if (records.length) {
        contentHistoryView.html('<i>history show up here in order.</i>');
    } else {
        var xhistory = '<div id="history">';
        for (var i = 0; i < records.length; i++) {
            var xaction = records[i]
            xhistory += '<div id="action">' + (i + 1) + '. ' + '<b>' + xaction.action + "</b> " + xaction.caption + '<span class="delaction" id=' + i + ' data-stamp="' + xaction.msg + '" style="color:red;cursor:pointer;">' + '[remove]' + '</span></div>'
        }
        xhistory += "</div>"
        qtipHistoryView.html(xhistory);
    }
}

不过，我怀疑这会产生巨大的影响，因为我怀疑大部分执行时间都花在了循环中。

相关文章：