jQuery ajax async locks 브라우저

Question

서버에서 처리 할 거대한 파일이 있습니다. 파일을 서버에 업로드 한 다음 읽어서 배열을 만듭니다. '진정한 비동기'잠금 여기에

function getXMLFile(file){ // Single call 
    $.ajax({ 
    url: '....', 
    type: 'post', 
    dataType: 'json', 
    data: {filename: file}, 
    success: function(json){ 
     $.each(json, function(key, value){ // iterates over 50 000 items. 
     tmp.push(value); 
     i++; 
     if(i > 10000){ 
     setTimeout(function(){ 
     insert(tmp); 
     tmp = []; 
     i = 0; 
     }, 1000); 
     } 
    }); 
    } 
    }); 
} 

및 기능 : 내 브라우저 있도록에서는 setTimeout을 사용

function insert(data){ // called from getXMLFile() @data -> array of 10 000 code entries 
    $.ajax({ 
     url: '....', // for now php function does nothing. 
     type: 'post', 
     dataType: 'json', 
     data: {codes: data}, 
     async: true // !!!! 
    }); 
    } 
}); 

당신은 내가이 볼 수 있듯이을 지금은 다시 서버로 정보를 둘 필요가 잠기지 마라. 하지만 여전히 잠겨 있습니다 ... 내가 잘못 했나요?

Answer 1

파일을 서버에 업로드하면 서버에서 많은 양의 데이터를 반환합니다. 데이터에서 약 50000 개의 항목을 반복하면 배열이 계속 증가하면서 10000 개의 반복마다 요청을합니다. 당신은 큰 데이터로 1 초마다 약 5 개의 요청으로 끝납니다.

브라우저의 성능에 영향을주는 것이 합리적입니다. 서버에서 작업 할 수있는 모든 작업을 제안합니다. 예를 들어 서버에서 처음으로 반환 된 데이터는 클라이언트의 대용량 데이터를 요청하여 데이터를 다시 보내지 않고도 서버가 처리 할 수 ​​있습니다. 이렇게하면 브라우저의 성능 저하를 개선 할 수 있습니다.

브라우저의 메모리 소비에 대한이 문제를 해결하고 작은 데이터 세트로 작업 해보십시오. 브라우저가 잠기지 않으면 클라이언트 측에서 처리하려고하는 데이터가 너무 많다는 것을 알 수 있습니다.