IE 8은 사용자에게 "느린"jQuery 스크립트를 묻습니다.

Question

나는 이이어야하며 100 개 이상의 목록 항목이있는 양식이 있습니다. 다음 코드는 Firefox에서 명백한 문제없이 내 목록의 순서를 변경합니다. 그러나 IE에서 "이 페이지의 스크립트로 인해 Internet Explorer의 실행 속도가 느려집니다. 실행이 계속되면 컴퓨터가 응답하지 않을 수 있습니다. 스크립트를 중단 하시겠습니까?"라는 메시지가 나타납니다. 사용자가 '아니요'를 클릭하면 스크립트가 예상대로 작동합니다.

var listitems = $(form).find('li').get(); 
listitems.sort(function(a, b) { 
    var compA = $(a).attr('id'); 
    var compB = $(b).attr('id'); 
    return (compA - compB); 
}); 

더 효율적으로 만드는 방법에 대한 아이디어가 있으십니까?

Answer 1

나는 100 개 항목을 시도하지 않았다 그러나 그것은 완전히 2.

listitems.sort(function(a, b) { 
    return (a.id - b.id); 
}); 

Answer 2

일한 당신은 또한 더 작은 조각으로 그것을 깰 수 있으며, 주기적으로 브라우저 컨트롤 '제공 :

How can I give control back (briefly) to the browser during intensive JavaScript processing?

을

Answer 3

귀하의 코드는 귀하의 ID가 HTML로는 유효하지 않은 숫자임을 제안합니다. 디자인을 변경해야합니다. 또한 jQuery를 사용하지 않고도이 작업을 매우 간단하게 수행 할 수 있습니다.

다음은 ID가 "li_x"형식 인 것으로 가정합니다. 여기서 x는 정수입니다. 모든 비교에서 숫자 ID를 추출하는 함수를 호출하므로 완전히 최적화되지 않았습니다. 성능을 향상시킬 필요가 있다면 사전에 숫자 ID를 캐싱 할 수 있지만이를 보증 할만큼 나쁠 것이라고는 생각하지 않습니다.

function getNumericId(li) { 
    return li.id.split("_")[1]; 
} 

var liList = form.getElementsByTagName("li"); 
var liArray = Array.prototype.slice.call(liList, 0); 
liArray.sort(function(a, b) { 
    return getNumericId(a) - getNumericId(b); 
}); 

Answer 4

다른 접근 방식을 사용하여 여러 브라우저에서 흥미로운 결과를 얻었습니다. 불행히도 평소와 같이 문제가되는 브라우저는 내가 액세스 할 수없는 브라우저입니다. IE에서이 테스트를 실행하는 방법에 대해 누구나 언급 할 수 있으면 감사하겠습니다.

크롬에 jQuery를 모두 사용하지 않아도별로 얻지는 않았지만 jQuery를 건너 뛰면 다른 브라우저에서 훨씬 좋은 결과를 얻을 수있었습니다. 또한, <li> 요소의 수가 증가함에 따라, id와 정렬만으로 배열을 구성하는 것이 도움이됩니다. 정렬이 완료되면 정렬 된 ID의 배열을 사용하여이 배열을 사용하여 올바른 순서로 노드 데이터를 가져올 수 있습니다.

목록 항목의 정렬을 정렬합니다.

function sortListItems() { 
    var listItems = $("li").get(); 

    listItems.sort(function(a, b) { 
     return a.id - b.id; 
    }); 
} 

ID의 배열을 정렬하십시오.

function sortIDs() { 
    var listItems = $("li"); 
    var ids = []; 
    for(var i = 0; i < listItems.length; i++) { 
     ids.push(listItems[i].id); 
    } 

    ids.sort(function(a, b) { 
     return a - b; 
    }); 
} 

결과를 http://jsfiddle.net/hwxmJ/4/에서 확인하십시오. 사파리는 1000 가지 항목으로 무엇인가의 이유가 있었지만, 크롬, 오페라, 파이어 폭스는 2000 가지 요소로 잘 작동했습니다.