구문 분석하는 방법 JSON 데이터를 더 빠르게

Question

이 같은 서버에서 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 
    } ] 

이 같은 거의 5000 인덱스가 있습니다,이 인덱스됩니다. 이 문제 됐었하고있다

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 개 인덱스가 이미하고 날마다 증가하는 것 같은이 검색 및 가져 오는 프로세스가 조금 느린 점이다 : 는이 같은이 JSON을 구문 분석. 그것은 데이터와 정상적인 brute-force method을 구문 분석하는 직선 루프입니다.

이제 더 빨리 구문 분석 할 수있는 방법이 있는지 알고 싶습니다. 정방향 루프 대신 더 빠른 방법으로 구문 분석 할 수 있습니까?

Answer 1

약간 속도를 높이려면 몇 가지 제안 사항이 있습니다.

브래드가 제안했듯이 요소를 변수에 캐시합니다. DOM에 대한 조회는 비용이 많이 들지만 루프 반복마다보다 한 번만 수행하는 것이 좋습니다.

둘째, jquery .each 메서드를 사용하는 대신 표준 루프를 사용하십시오. 특히 도서관의 foreach 나 map 메소드보다 빠릅니다.

셋째, 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()); 
} 

Answer 2

데이터는 구문 분석 할 때와 같이 빨리 구문 분석됩니다. jQuery는 사용 가능한 경우 네이티브 JSON.parse() 메서드를 사용할 것이므로별로 할 수 없습니다.

여기 실제 문제는 DOM에 데이터를 추가하는 방법과 관련이 있습니다.

먼저, 재사용 변수에 선택한 요소를 캐시 :

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

이 그런 다음 루프 내에서, 당신은 단지 $desc.append()를 사용할 수 있습니다.

다음은 모든 요소를 ​​준비 할 때 DOM에 요소를 추가하는 것입니다. 하나만 추가하면 속도가 향상되지만 브라우저마다 다를 수 있습니다.