간단한 jQuery는 Firefox, IE, Chrome의 초고속에서 느립니다.

Question

jQuery의 새로운 기능. 아래의 함수를 내가 개발하고있는 페이지에 구현했다. 비교적 간단한 jQuery가 문제가 있음을 증명하고있다.

$(document).ready(function(){ 

    var leftnav = $("#leftnav ul li"); 

    leftnav.hover(function(){ 
     $(this).children('ul').stop(true, true).slideDown(); 

    },function(){ 
       $(this).children('ul').stop(true, true).slideUp(); 
    }); 

}); 

기본적으로 크롬과 오페라에서는 훌륭하게 부드럽고 빠릅니다. 파이어 폭스와 IE8에서는 진흙 옷을 끼고있는 것처럼 개 느슨하고 느리게 움직입니다. 내가 말했듯이 나는 jQuery에 새로운 브랜드 다. 웹 페이지를 구현하려고 시도한 것은 이번이 처음이다. 나는 mouseenter와 mouseleave를 사용하여 같은 것을 시도했지만, 거의 차이가 없다.

나는 IE8에 문제가있을 것으로 예상했지만, 파이어 폭스가 항상 저에게 맹세 한대로 문제를 제기하고 있습니다. 나는 이것을 받아 들여 회합을 만들어야 하나?

감사합니다.

편집 : 좋아, 나는 조금 더 빠르게 할 수 있었다. 번개 크롬 성능, IE8과 파이어 폭스는 여전히 내가 받아 들일 수있는 전화입니다. 이 우수 페이지에서 몇 가지 팁을 얻었습니다. - http://www.artzstudio.com/2009/04/jquery-performance-rules/

단순히 내 셀렉터 변수를 '#leftnav ul'에 부여하면 내 마크 업 - #list에 자체 ID가 표시되고 내 jQuery 코드에서는이를 참조합니다. 그래서,

var leftnav = $("#leftnav ul li"); 

이된다 :이 jQuery를 문제의 요소를보다 효율적으로 연마 할 수 있습니다 모여 무슨에서

var leftnavUl = $("#list li"); 

합니다.

Firebug에서 console.time을 사용하면 각 선택기에서보다 구체적으로 설명하면 ~ 15ms에서 ~ 10ms까지 각 slideDown 작업의 속도가 향상되었음을 확인했습니다.

크롬처럼 여전히 qucik은 아니지만 더 좋아지고 있습니다.

Answer 1

오류가 발생하지 않거나 글리치가 발생하지 않으면 그다지 많지 않을 수 있습니다.

코드에 거대한 루프가 있거나 지연 될 수있는 것처럼 보이지 않습니다. 코드가 단순히 브라우저 handel jQuery의 방식과 비슷합니다.

왜 사용하지 않는 :

$를 ("#이 울 리 UL을 leftnav") 가져가 (... 요법 ...)

당신은 '아이들'을 잘라 수 있습니다 그런 식으로. 전화 및 var. 다른 용도로 사용하지 않는 이상입니다.