브라우저가 Jquery 복제로 인해 동결 됨 많은 div

Question

나는 다음과 같이 간단한 문제를 단순화했습니다. 나는 거대한 배열의 요소가 있으며 각 요소에 대해 div를 작성해야합니다. 이로 인해 브라우저가 멈추거나 스크립트를 중지하라는 팝업이 표시됩니다.

var fruits = ["0"]; 
for (var i = 1; i < 2000; i ++){ 
    fruits.push(i); 
} 

function qweqwe(fruits) { 
    var ida = fruits.shift(); 
    if (ida) { 
     console.log(ida); 
     $('#0').clone(true).attr('id', ida).insertAfter($('.asd:last')); 
     qweqwe(fruits); 
    } 
} 
$("#butt").click(function() { 
qweqwe(fruits); 
}); 

피할 수있는 방법이 있습니까? 또는 어떤 해결 방법? 어쩌면 한 번에 50 개 요소를 만드는 어떤 방법일까요? 내가 더 나은 사전에 내 문제를 http://jsfiddle.net/b7dewtsk/1/ 덕분 설명 관련

하는 jsfiddle을 만들어

Answer 1

실제로 큰 HTML 문자열을 만들어서 DOM에 한 번에 추가 할 수 있습니다.

function showFruits(){ 
    var html = []; 
    fruits.forEach(function(fruit) { 
     html.push('<div id="', fruit, '" class="asd">qwe</div>'); 
    }); 
    $(html.join('')).insertAfter('.asd'); 
} 

$("#butt").click(showFruits); 

.

Answer 2

당신은 소셜 미디어처럼 생각할 수

; 표시 할 내용이 많이 있지만 동시에 모든 내용을 가져 오려면 일이 남을 것입니다.

데이터의 하위 집합을 가져와 표시하면 사용자가 아래로 스크롤하면 AJAX를 수행하여 추가 할 데이터의 다음 하위 집합을 가져올 수 있습니다. 스크롤을 시작하면 바로 하위 집합을 가져 와서 추가 할 수 있으므로 필요할 때 데이터를 준비 할 수 있습니다.

어쨌든 사용자가 처음 5 % 만 볼 필요가있는 경우 전체 데이터베이스를 쿼리 할 필요가 없습니다.

편집

당신이 수행하는 비교 방법이 더 가볍고 당신이 그때 문자열로 작업하기 때문에 @Yury Tarabanko의 관점으로 가고 싶어 데이터베이스 테이블의 전체 내용을 원하는 100 % 확신하는 경우 n 번 더한다.