提高使用 jQuery 搜索 JSON 对象的性能

Question

如果已经在某处回答了这个问题，请原谅我。我已经搜索过了，这似乎是一个相当具体的案例。

这是 JSON 的示例（注意：这是非常精简的 - 这是动态加载的，目前有 126 条记录）：

var layout = {
"2":[{"id":"40","attribute_id":"2","option_id":null,"design_attribute_id":"4","design_option_id":"131","width":"10","height":"10",
            "repeat":"0","top":"0","left":"0","bottom":"0","right":"0","use_right":"0","use_bottom":"0","apply_to_options":"0"},
    {"id":"41","attribute_id":"2","option_id":"115","design_attribute_id":"4","design_option_id":"131","width":"2","height":"1",
            "repeat":"0","top":"0","left":"0","bottom":"4","right":"2","use_right":"0","use_bottom":"0","apply_to_options":"0"},
    {"id":"44","attribute_id":"2","option_id":"118","design_attribute_id":"4","design_option_id":"131","width":"10","height":"10",
            "repeat":"0","top":"0","left":"0","bottom":"0","right":"0","use_right":"0","use_bottom":"0","apply_to_options":"0"}],
"5":[{"id":"326","attribute_id":"5","option_id":null,"design_attribute_id":"4","design_option_id":"154","width":"5","height":"5",
            "repeat":"0","top":"0","left":"0","bottom":"0","right":"0","use_right":"0","use_bottom":"0","apply_to_options":"0"}]
};

我需要匹配正确的值组合。这是我目前使用的功能：

function drawOption(attid, optid) {
    var attlayout = layout[attid];
    $.each(attlayout, function(k, v) {
        // d_opt_id and d_opt_id are global scoped variable set elsewhere
        if (v.design_attribute_id == d_att_id
            && v.design_option_id == d_opt_id  
            && v.attribute_id == attid 
            && ((v.apply_to_options == 1 || (v.option_id === optid)))) {
                // Do stuff here
        }
    });
}

问题是我可能会遍历 10-15 个布局（唯一的 attid），而任何给定的布局 (attid) 可能有多达 50 种可能性，这意味着这个循环正在运行很多次。

考虑到必须匹配的多个条件，AJAX 调用会更好吗？ （这个 JSON 是通过 PHP 动态创建的，所以我可以制作一个 PHP 函数，它可能会更有效地做到这一点）， 还是我完全错过了有关如何在 JSON 对象中查找项目的信息？

一如既往，欢迎提出任何改进代码的建议！

编辑：
我很抱歉没有说清楚，但这个问题的目的是找到一种提高性能的方法。该页面有很多 javascript，这是我知道性能低于其可能的位置。

Answer 1

首先，您应该衡量，并且只有在存在真正的性能问题时才采取行动。您需要确切的数字，例如 200 毫秒或 80% 的时间都花在了那里。 “它运行很多”并不意味着什么。浏览器可以非常快地循环。

您可以像其他人提到的那样改进常量因素，例如使用原生 for 循环而不是 jQuery.each。在这种情况下，Chaching 全局变量不会对您有太大帮助。

如果你真的想提高效率，你应该找到比 O(n) 更好的算法。假设您只使用这些数据来查找符合特定条件的元素，您可以使用 JS 对象作为哈希来实现 O(1) 性能。

只是针对您的具体情况的示例：

var layout = {
  "2": { "2,,4,131,10,0": ["40", "93"], "2,115,4,131,0": ["41"] },
  "4": { ... },
  ...
};

在 php 中生成此输出相当容易，然后您只需使用查找来查找与您的特定条件匹配的 id。

Answer 2

恕我直言，一个简单的 hashmap 索引可能效果最好。这确实需要您提前循环数据，但可以轻松地附加和缓存索引。

生成索引后，查找的时间应该是 O(1)，并且每个键都会处理多个条目。

    var layout = {
    "2":[[...], ...],
    "5":[[...], ...]
    };

    var index = {};

    function makeKey(data) {
        return data.join('_');
    }

    for(var l in layout) {
        var cur = layout[l];

        for(var i in cur) {
            var item = cur[i];
            var key = makeKey([item.p1, item.p2, ...]);

            index[key] = index[key] || [];
            index[key].push(item);
        }
    }

    function find(attid, optid) {
        var key = makeKey([attid, optid, 1, d_att_id, ...]);
        return index[key]; //this is an array of results
    }

Answer 3

我的第一个建议是停止使用$.each，如果您想尽可能地发挥性能。 jQuery.each 比传统循环做得更多。在浏览器的调试器（即 Safari 的/Chrome 的 Web 开发者工具）运行的情况下查看 this jsFiddle，然后逐步调试直到从 jQuery 完全返回执行。

供参考，小提琴的代码是：

var myArr = [{"foo":"bar"},{"answer":42}];

debugger;

$.each(myArr, function(k, v) {
    console.log(k + ': ');
    console.dir(v);
});​

现在运行the second version：

var myArr = [{"foo":"bar"},{"answer":42}],
    i, j;

debugger;

for (i = 0, j = myArr.length; i < j; i += 1) {
    console.log('myArr[' + i + ']: ');
    console.dir(myArr[i]);
}​

请注意，在第二个版本中执行的操作要少得多。所以这是微小的一点性能提升。

其次，尽可能多地消除本地范围之外的查找。即使您缓存了对全局变量的引用（嘘！），那么您可以save a lot of time 考虑到该循环可能会执行数百次。所以而不是：

function foo(a, b) {
    if (a === globalA && b === globalB) {
        // Do stuff
    }
}

你会这样做：

function foo(a, b) {
    var gA = globalA,
        gB = globalB;
    if (a === gA && b === gB) {
        // Do stuff
    }
}

至于根据对象成员配对条件，我没有看到其他可以改进的地方。您正在检查的对象属性是顶级的，并且您正在查看每个对象的本地实例（因此范围链查找很短）。

如果不知道这实际上应该如何工作，这些是我能提出的最佳建议。但是，我可以猜测您从更简单的 JSON 数据开始的想法将是一个很大的改进。如果您知道布局及其约束是什么，那么从服务器请求特定详细信息意味着您不必检查这么多条件。您可以简单地向服务器询问您实际需要实现的详细信息并循环访问这些信息（以更新 DOM 或其他）。

Answer 4

我看到您正在搜索 5 个字段：v.design_attribute_id、v.design_option_id、v.attribute_id、v.apply_to_options、v.option_id。

您可以做的是向对象添加一个名为“key”的额外字段，该字段由这些字段中的值组合而成。

这是一个例子

       {
            "key": "4_131_2_0_0" //i picked 0 to represent null, but you can pick any number                                    
            "id": "40",
            "attribute_id": "2",
            "option_id": null,
            "design_attribute_id": "4",
            "design_option_id": "131",
            "width": "10",
            "height": "10",
            "repeat": "0",
            "top": "0",
            "left": "0",
            "bottom": "0",
            "right": "0",
            "use_right": "0",
            "use_bottom": "0",
            "apply_to_options": "0"
        }

请注意，您必须标准化每个值的长度。 这意味着如果一个对象 optionId 是 1 而另一个对象 optionID 是 566 你必须代表 密钥字符串中的第一个 optionId 为 001。

使用此字段，您可以在将数组返回给客户端之前在服务器端对数组进行排序。

然后您可以使用二进制搜索来查找客户端上的值。

使用位于此处的二进制搜索实现 http://www.nczonline.net/blog/2009/09/01/computer-science-in-javascript-binary-search/

您的搜索功能类似于

function drawOption(attid, optid) {
    var attlayout = layout[attid];
    var needle = d_att_id + "_" + d_opt_id + "_" + attid + "_" + optid; //remember to normalize  length if you have to

    var idx = binarySearch(attlayout,needle);

    var item;
    if(idx !== -1){
        item = attlayout[idx];
        //do something 

    }
}

您可以尝试使用此复合键思想的另一种方法是让服务器返回 一个大对象中的布局对象由 attid,v.design_attribute_id,v.design_option_id,v.attribute_id,v.apply_to_options,v.option_id

然后您可以在 O(1) 时间内查找。 它看起来像

 function drawOption(attid, optid) {

    var needle = attid + "_" + d_att_id + "_" + d_opt_id + "_" + attid + "_" + optid; //remember to normalize  length if you have to

    var item = layout[needle];
    if(typeof item !== "undefined"){
        //do something 

    }
}

Answer 5

在尝试改进代码时，最好使用 firebug 分析检查哪些函数需要时间。您可以通过单击 firebug 控制台面板中的配置文件按钮进行配置，然后运行您的代码或在您的代码中使用 firebug's profiling commands

从你给出的代码中，只能给出几个改进点。

1. $.each 与本机循环解决方案相比速度较慢。为了最好 循环解决方案，看看这个JsPref test
2. 最好将 JSON 更改为使用数组而不是对象文字。据说检索值更快。

Answer 6

我以前有过此类问题的经验，我的 js 对象数组包含 8000 条记录甚至更多。 我的经验不是关于性能，而是代码的可读性、可维护性和可扩展性。

因此我在 2 年前开发了一个 JS 对象查询库：JSOQL http://code.google.com/p/jsoql/

它像 SQL 一样工作，允许您使用类似于 SQL 的语法查询您的 js 对象数组。

示例用法是这样的，我不记得了，但是您可以在下载选项卡中下载示例用法。

new JSQOL().Select([field1, field2, field3 ...]).From({ ... }) .Where(fn) .Offset(int) .Limit(int) .Get();

注意： {...} 是你的对象数组，或者它自己的一个对象。

希望对您有所帮助，如果您需要更多信息，可以给我发消息。

Answer 7

它不会在任何地方都有效，但您的问题听起来像是可以通过 webworkers 解决的问题

如果您没有网络工作者，我会考虑的另一件事是尽量不要长时间阻止 ui。如果您可以将它分成大约 40 毫秒的位，然后在几毫秒后设置下一个块，用户将获得更愉快的体验。这需要一点点摆弄，但是当某些事情花费的时间超过 50 到 100 毫秒之间时，用户会开始注意到一些东西

Answer 8

你考虑过使用 jQuery 的 grep 函数吗？

jQuery grep

以jquery grep on json object array 为例。

Answer 9

这是一种可能会以使用更多内存为代价产生更好性能的技术。

我将保留我的代码示例，只是为了说明这个概念。

首先，您需要将 JSON 数据预处理为一些充当索引的附加数组。以下是预处理后最终数组的示例：

var layouts_by_attribute = {
    // attribute_id => array(layouts)
    2: [40, 41, 44],
    5: [326]
};

var layouts_by_design_attribute_id = {
    // design_attribute_id => array(layouts)
    4: [40, 41, 44, 326]
};

现在通过属性查找布局非常快捷：

function findByAttribute(attribute_id) {
    return layouts = layouts_by_attribute[attribute_id];
}

function findByDesignAttribute(design_attribute_id) {
    return layouts = layouts_by_design_attribute[design_attribute_id];
}