2

サーバー上に次のようなjson インベントリ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
  } ]

ここに 2 つのインデックスがあります。ほぼ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

データは、解析するのと同じくらい速く解析されます。JSON.parse()jQuery は利用可能な場合はネイティブ メソッドを使用するため、これについてできることはあまりありません。

ここでの本当の問題は、DOM にデータを追加する方法に関係しています。

まず、選択した要素を変数にキャッシュして再利用します。

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

次に、ループ内で$desc.append().

次に、すべての要素の準備が整ったときにのみ要素を DOM に追加します。追加を 1 つだけ行うと速度が向上するはずですが、ブラウザーによって異なる場合があります。

于 2012-12-15T04:39:29.853 に答える
0

もう少しスピードアップしたい場合は、いくつかの提案があります。

Brad が提案したように、要素を変数にキャッシュします。DOM へのルックアップはコストがかかるため、ループの各反復で行うよりも 1 回だけ行う方がはるかに優れています。

次に、jquery .each メソッドを使用する代わりに、標準ループを使用します。これは、ライブラリの foreach または map メソッドよりも著しく高速です。

3 番目に、append を何度も呼び出す代わりに、最初に文字列全体を作成してから追加します。各関数呼び出しのコストは、通常はごくわずかですが、長いループでは少ないほど良いです。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 に答える