Firefox와 IE에서 느리게 실행되는 YUI 애니메이션

나는 YUI 애니메이션 모듈과 다른 효과를 사용하는 YUI-2를 사용하여 응용 프로그램을 만들었습니다. 양식이 다음과 같이 작동합니다. http://tympanus.net/Tutorials/FancySlidingForm/
YAHOO.util.Scroll()은 애니메이션 효과를 만드는 데 사용됩니다.Firefox와 IE에서 느리게 실행되는 YUI 애니메이션

var myAnim1 = new YAHOO.util.Scroll('container1', { 
left: {  
    to: 500 
} 
},1,YAHOO.util.Easing.easeOut); 
myAnim1.animate();

위의 코드는 Chrome에서 완벽하게 작동하지만 애니메이션은 Firfox와 Internet Explorer에서 느리게 실행됩니다. 누구나이 브라우저에서 코드가 느리게 실행되는 문제가 무엇인지 나에게 제안 할 수 있습니까?

출처

2011-03-13 Vin

느린 애니메이션의 일반적인 이유는 브라우저 렌더링 엔진의 속도입니다.

애니메이션 효과 및 html 페이지의 렌더링 된 부분에 미치는 영향에 따라 브라우저는 애니메이션의 각 단계마다 페이지를 다시 렌더링해야합니다.

IE는 일반적으로 매우 좋지 않습니다. 파이어 폭스는 일반적으로 상당히 좋지만 일부 레이아웃에는 문제가 있습니다. Chrome은 거의 항상이 기능이 뛰어나므로 문제는 거의 볼 수 없습니다.

출처

2011-03-13 01:50:10

나는 (각각 3 개 미만의 필드로) 3 개의 폼을 생성하고 다음과 같이 애니메이션을 만들었습니다. http://tympanus.net/Tutorials/FancySlidingForm/ – Vin

예, 렌더링 재현 문제입니다. js 프로파일 링은 활동과 시간을 거의 보이지 않습니다. (계정에서 모든 애니메이션 단계를 거칠 때 3300 함수 호출과 43ms가 내 컴퓨터에서 파이어 폭스 3.6에 사용됨) –

일반적으로 DOM 요소가 많을수록 애니메이션 효과가 더 커집니다. layout/css의 스타일은 또한 요소가 될 수 있습니다. 절대 배치 된 요소는 예를 들어 동적 너비 테이블보다 렌더링 엔진에서 쉽게 해결할 수 있기 때문에 쉽게 애니메이션을 적용 할 수 있습니다. 수레도 꽤 무거 우며 마진이 무너지는 것과 같습니다. –

Firefox와 IE에서 느리게 실행되는 YUI 애니메이션

답변

관련 문제