Question

我正在Backbone Collection中从服务器加载一些初始数据。我设置了一个搜索输入，用于激活对服务器的AJAX调用，并在每个keyup返回解析的JSON。

我希望搜索仅在客户端进行。到目前为止，我已经设置了这个代码（函数发生在#search输入的keyup中）：

todos是一个backbone.marionette集合

$('.content-search').on('keyup', '#search', function(e){
    e.preventDefault();
    var search = $('#search').val().toLowerCase();
    todos.update(initialData.todos);
    var json = todos.toJSON();
    var filteredJSON = filterJSON(json, search);
    dcis.update(filteredJSON);
}

function filterJSON(arr, part) {
    return arr.filter(function(obj) {
        return Object.keys(obj)
            .some(function(k) {
                console.log(obj[k]);
                if(typeof(obj[k]) == 'string'){
                    return obj[k].toLowerCase().indexOf(part) !== -1;
                }
            });
    });
};

非常慢。使用AJAX调用调用服务器实际上比过滤客户端更快！

为什么我的代码太慢了？ JSON非常大（500多个条目）

Answer 1

即使有500个条目，我保证最多的工作不是过滤JSON。除非您手动更新DOM而不是使用主干渲染功能，否则它在浏览器的渲染/绘制周期中。

首先尝试在您调用filterJSON的行上方设置console.time('filterMyCollection')。并console.timeEnd('filterMyCollection')之后。

然后执行相同操作，但在主干渲染函数的第一行和timeEnd作为最后一行。

如果你正在破坏并重新创建一个大量内存，CPU和垃圾收集时间的模板。如果您需要显示大量元素的帮助，您应该看看它是如何在PerfView（https://github.com/puppybits/BackboneJS-PerfView）中完成的。它能够以120FPS的速度在Chrome中滚动1,000,000个模型。

Backbone（客户端）过滤集合中的性能问题

1 个答案: