Json 集合中的主干（客户端）筛选器性能问题

我正在从主干收集中的服务器加载一些初始数据。 我设置了一个搜索输入，该输入触发对服务器的AJAX调用，并在每次keyup时返回解析的JSON

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

todos是一款主干线提线木偶系列

$('.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多个条目）

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

尝试在调用filterJSON的行上方首先设置console.time（'filterMyCollection'）。和

console.timeEnd（'filterMyCollection'）

然后执行与主干渲染函数中第一行相同的操作，并将timeEnd作为最后一行

---

如果您正在销毁和重新创建一个模板，这将占用大量内存、CPU和垃圾收集时间。如果需要显示大量元素的帮助，请查看PerfView（）中的操作。它能够以120FPS的速度在Chrome浏览器中滚动浏览1000000个型号。

我会尝试不使用任何下划线功能进行过滤和循环，因为每个功能都需要调用函数（只需使用

进行

循环）。您可能需要通过降低文本大小写一次来优化文本搜索，而不是每次需要搜索时。您可能只是为了自己的测试而包括console.log，但如果频繁调用它，则可能会降低总体性能。此外，使用不区分大小写的正则表达式可能比循环中的toLowerCasing（）和索引检查更快。