2

我inventory.json在服务器上有这样的 json 库存：

[ { "body" : "SUV",
    "color" : { "ext" : "White diamond pearl",
        "int" : "Taupe"
      },
    "id" : "276181",
    "make" : "Acura",
    "miles" : 35949,
    "model" : "RDX",
    "pic" : [ { "full" : "http://images1.dealercp.com/90961/000JNBD/001_0292.jpg" } ],
    "power" : { "drive" : "Front wheel drive",
        "eng" : "2.3L DOHC PGM-FI 16-VALVE",
        "trans" : "Automatic"
      },
    "price" : { "net" : 29488 },
    "stock" : "6942",
    "trim" : "AWD 4dr Tech Pkg SUV",
    "vin" : "5J8TB2H53BA000334",
    "year" : 2011
  },
  { "body" : "Sedan",
    "color" : { "ext" : "Premium white pearl",
        "int" : "Taupe"
      },
    "id" : "275622",
    "make" : "Acura",
    "miles" : 40923,
    "model" : "TSX",
    "pic" : [ { "full" : "http://images1.dealercp.com/90961/000JMC6/001_1765.jpg" } ],
    "power" : { "drive" : "Front wheel drive",
        "eng" : "2.4L L4 MPI DOHC 16V",
        "trans" : "Automatic"
      },
    "price" : { "net" : 22288 },
    "stock" : "6945",
    "trim" : "4dr Sdn I4 Auto Sedan",
    "vin" : "JH4CU2F66AC011933",
    "year" : 2010
  } ]

这里有两个索引，几乎有这样的5000索引。我这样解析这个json：

var url = "inventory/inventory.json";
$.getJSON(url, function(data){
  $.each(data, function(index, item){ //straight-forward loop
    if(item.year == 2012) {
      $('#desc').append(item.make + ' ' + item.model + ' ' + '<br/>' + item.price.net + '<br/>' + item.pic[0].full); 
    }         
  });
});

这工作正常。但问题是，这个搜索和获取过程有点慢，因为已经有 5000 个索引并且它每天都在增加。看起来，解析数据和正常的brute-force method.

现在我想知道是否有任何时间有效的方法来更快地解析。任何更快的方法来解析而不是直接循环？

4

2 回答 2

3

数据的解析速度与解析速度一样快。您对此无能为力，因为 jQuery 将JSON.parse()在可用时使用本机方法。

这里真正的问题与您如何将数据附加到 DOM 有关。

首先，将您选择的元素缓存在一个变量中以供重复使用：

var $desc = $('#desc');

然后在你的循环中，你可以使用$desc.append().

接下来，我只会在您准备好所有元素后将它们添加到 DOM 中。只做一个追加应该会给你一些速度改进，但这可能会因浏览器而异。

于 2012-12-15T04:39:29.853 回答
0

如果您想加快速度，我有一些建议。

正如布拉德建议的那样，将元素缓存在变量中。查找 DOM 是昂贵的，只做一次比在循环的每次迭代中都要好得多。

其次，不要使用 jquery .each 方法，而是使用标准循环。它比任何库 foreach 或 map 方法都快得多。

第三，与其进行如此多的追加调用，不如先构建整个字符串，然后再追加。每个函数调用都是有代价的，通常非常小，但在一个长循环中，越少越好。DOM 操作的成本特别高，因此执行一次会快得多。

$.getJSON(url, function(data){
  var $desc = $('#desc');
  var toAppend = [];
  for (var i = 0, len = data.length; i < len; i++) {
    //build the html here
    var current = data[i];
    toAppend.push( current.make + 'etc...' );

  }
  $desc.append( toAppend.join() );
}
于 2012-12-15T05:04:28.100 回答