0

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

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

todos 是一个骨干.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 多个条目）

4

1 回答 1

0

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

尝试console.time('filterMyCollection')在调用 filterJSON 的行上方进行第一个设置。而console.timeEnd('filterMyCollection')在它之后。

然后做同样的事情，但在主干渲染函数的第一行和 timeEnd 作为最后一行。

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

于 2013-10-22T05:41:15.350 回答