Jquery 애니메이션 최적화

그래서 Jquery .animate (scrollTo : value) 함수를 최적화하는 최선의 방법을 찾아야합니다. 이 예제를 가지고 : 여기Jquery 애니메이션 최적화

$('#returnToTop').on('click', function(){ 
     $('html, body').animate({ 
      scrollTop: 0 
     }, 'slow'); 
    });

당신이 클릭 할 때, 위로 가기 페이지를 스크롤하는 "최고"버튼 역할을하는 사업부가 있습니다. 이제는 복잡한 페이지에서 다소 엉망이며 매끄럽지 않습니다. 어떤 jQuery 닌자가 애니메이션 기능이 정확히 무엇인지 밝혀 줄 수 있는지 궁금합니다. 간단한 페이지에서는 멋지고 부드럽습니다.

이제는 DOM을 따라가는 계산을 수행한다고 가정합니다. 따라서 복잡한 경우 다소 시간이 걸릴 수 있습니다. 여기에 문제의 핵심은 다음과 같습니다. 개발자가 jQuery에 정확한 매개 변수를 제공하여 계산이 더 간단 해져서 애니메이션을 더 매끄럽게 만들 수 있도록 모든 조치를 취할 수있는 단계가 있습니다. 제공되는 경우 상당한 속도 향상을 제공하는 중요한 특정 값이있을 수 있습니다.

아무도 통찰력이 있습니까?

감사합니다.

출처

2012-07-09 gabaum10

jQuery에서 "느린"은 시간의 양 (정확히 600ms)입니다. 큰 페이지 인 경우 600ms의 상단으로 이동하려면 급격한 변화가 필요합니다.

페이지 높이와 관계없이 일정한 속도로 애니메이션을 만들고 싶다면 t = offsetTop/k의 지속 시간을 초당 약 k 픽셀 씩 걸리십시오. 여기서 offsetTop은 $(clickedElement).offset().top입니다.

jQuery에도 똑같은 플러그인이 있습니다.

출처

2012-07-09 21:30:57 iurisilvio

+1 .... 아주 좋은 생각 – Jashwant

이것은 실제로는 훨씬 부드럽지만 내 페이지의 복잡성으로 인해 여전히 약간 엉망이 된 것으로 보입니다. 누군가가 렌더링 속도가 느려지는 원인을 분리하려고 애니메이션 함수의 내부 동작을 약간 이해할 수 있기를 바랍니다. 더 이상 응답을받지 못하면 올바른 것으로 표시하겠습니다. – gabaum10

코드가 느려지는 것을 확인하려면 몇 가지 javascript/css 프로파일 링 (예 : Chrome 개발자 도구 사용)을 시도해 볼 수 있습니다. – iurisilvio

Jquery 애니메이션 최적화

답변

관련 문제