Question

我在服务器上有json inventory inventory.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的直接循环。

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

Answer 1

数据将按解析速度进行解析。您可以做的不多，因为jQuery将在可用时使用本机JSON.parse()方法。

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

首先，将所选元素缓存在变量中以便重复使用：

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

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

接下来，当你准备好所有这些元素时，我只会将你的元素添加到DOM中。只做一个追加应该可以提高速度，但是从浏览器到浏览器可能会有所改变。

Answer 2

如果你想加快速度，我会提出一些建议。

正如Brad建议的那样，将元素缓存在变量中。对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() );
}

如何更快地从Web解析JSON数据

2 个答案: