jquery - 如何更快地解析来自Web的JSON数据

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 个索引，而且还在日益增加。看起来，这是一个解析数据的直接循环和一个正常的暴力方法。

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

Answer 1

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

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

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

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

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

接下来，只有当您准备好所有元素时，我才会将它们添加到 DOM。仅进行一个追加应该会给您带来一些速度提升，但这可能会因浏览器而异。