從網絡如何解析JSON數據來得更快

我有這樣的服務器上的JSON庫存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); 
    }   
    }); 
});

這是工作fine.But的問題是，這個搜索和提取過程有點慢，因爲有5000個指數已經和它的與日俱增。看來，這是一個直接循環來解析數據和一個正常的brute-force method。

現在我想知道是否有任何時間有效的方法來解析更快。任何更快的方法來解析而不是直接循環？

來源

2012-12-15 Fatal Error

考慮按年份組織您的數據。然後，您可以執行'data [2012]'並獲取2012年的所有項目，而無需迭代不必要的項目。 – Blender

減少發送到瀏覽器的數據量。使用Ajax動態請求所需的信息，而不是檢索它們可能需要的所有信息。 –

如果您想加快速度，我有幾點建議。

按照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()); 
}

來源

2012-12-15 05:04:28

Waaaaaaagh，不！至少不是上面編碼的。建立一個帶有'+ ='的字符串應該是可以避免的，因爲它爲後面的垃圾收集工作留下了一堆字符串，以便在未來某個不確定的地方處理。如果你想構建整個字符串，那麼在數組中完成，最後使用'arr.join（''）'把它們放在一起。 –

哦對。忘了那個。 –

數據將按照它要解析的速度解析。你可以做的事情不多，因爲jQuery在可用時將使用本地的JSON.parse()方法。

真正的問題在於如何將數據附加到DOM。

首先，緩存在重新使用一個變量您選定的元素：

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

然後你的循環裏面，你可以只使用$desc.append()。

接下來，我只會將你的元素添加到DOM，當你準備好了所有的元素。只做一個附加應該會讓你的速度有所提高，但是從瀏覽器到瀏覽器可能會有所不同。

來源

2012-12-15 04:39:29 Brad

從網絡如何解析JSON數據來得更快

回答

相關問題