Question

我有一个名为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);

    }
}

Answer 1

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

实现更详细的渲染逻辑，其中只渲染新项目并将其添加到DOM中。
使用ReactJs或Virtual DOM库，这些库允许您的代码使用渲染所有模式，但通过执行最低要求，可以更快地对DOM进行实际更新。

Answer 2

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

我个人一直在使用knockout.js，对此非常满意。基本上，您编写模板并且库处理DOM节点更改，仅更新所需的部件。您需要学习如何略微区别思考，但有一些很棒的tutorials可用。

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

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

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

    }
}

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

jQuery：重复调用时重绘函数非常慢

2 个答案: