jQuery가 request AnimationFrame을 사용하지 않는 이유는 무엇입니까?

jQuery가 request AnimationFrame을 사용하지 않는 이유는 무엇입니까?

일부 브라우저는 지원합니다.requestAnimationFrame, 그럼 왜 그걸 사용하지 않습니까?결국 구글 크롬 10부터 지원되고 있습니다.그럼에도 불구하고 jQuery는 그것을 사용하지 않는 것 같습니다.그것에 대한 버그 보고서를 찾았지만, 진짜 설명이 없었습니까?하지만 jQuery 사람들도 나름의 이유가 있을 겁니다.

왜 그들은 이 멋진 API를 사용하지 않을까요?

9381번 티켓에서 그들이 사용을 중단한 이유를 읽을 수 있습니다.requestionAnimationFrame얼마 후에

요약하면, 윈도우에 포커스가 없을 때 애니메이션이 실행되지 않는 문제(브라우저가 CPU 로드를 줄이려고 노력하는 것)가 있었습니다. 윈도우가 가려져 있으면 괜찮지만, 눈에 보이지 않으면 문제가 없습니다.게다가 애니메이션 줄들이 쌓였고, 윈도우가 다시 집중되면서 상황은 더 악화되었습니다.이를 위해서는 코드에 대한 보기 흉한 변경 및/또는 사람들이 애니메이션 큐에 추가하는 방법을 변경해야 합니다.그래서 더 나은 방법이 있을 때까지 지원을 중단하기로 결정했습니다.

여기에 다른 답변과 반대 의견이 있기 때문에 간단한 슬라이드쇼 애니메이션에서 이 내용을 테스트해 보고자 했습니다.

http://brass9.com/nature

2013년 현재, 여기에 있는 다른 답변의 반대 의견은 더 이상 중요하지 않은 것으로 보입니다.추가했습니다.

https://github.com/gnarf/jquery-requestAnimationFrame/blob/master/src/jquery.requestAnimationFrame.js

기존 애니메이션 코드로 전환하여 사용 중인 페이드 애니메이션에 영향을 미치고 있음을 확인했습니다.크롬 30, IE 11, FF 24에서 배경 창에서도 안정적으로 작동합니다.안드로이드 2.3을 테스트해보면 폴리필을 사용하고 예상대로 작동하는 것으로 보입니다.

jQuery 3

jQuery 3.0은 request AnimationFrame을 통합합니다.기본적으로 jQuery는 잘 처리할 수 있지만 일부 사용자는 전화를 할 것입니다..setInterval(function() { tag.animate(, 망쳤어요.따라서 주요 버전 릴리스에 대한 펀트입니다.jQuery 3은 IE8 이하를 지원하지도 않고 지원하지도 않을 것이므로 IE8 사용자가 있다면 jQuery 1.x를 사용하십시오.

CSS 전환

제 테스트에서 CPU/배터리 절감 주장은requestAnimationFrame거짓 약속입니다.CPU 사용률이 높은 것으로 보입니다. 예를 들어, 롱 페이드(long-fades)가 있습니다.CPU/배터리를 절약하는 것은 CSS Transitions인데, 아마도 브라우저, 특히 모바일 브라우저가 사용자가 의도하는 것과 요구하는 다른 것에 대해 훨씬 더 강력한 가정을 만들 수 있기 때문일 것이며 네이티브 코드는 여전히 Javascript+보다 빠릅니다.DOM.

따라서 CPU/배터리를 정말로 절약하고 싶다면 CSS Transitions가 여러분을 위한 것입니다.IE9 이하에서는 이를 처리할 수 없고 여전히 많은 사용자가 있습니다. 따라서 jquery.transit과 Fallback to를 고려해 보십시오.animate페이지 하단에

에서 v1.6.2 jQuery가 requestAnimationFrame존재할 경우 사용할 수 있습니다.될 수 다만으로 .setInterval(). 1.6.2의 코드는 다음과 같습니다.

// Start an animation from one number to another
custom: function( from, to, unit ) {
    var self = this,
        fx = jQuery.fx,
        raf;

    this.startTime = fxNow || createFxNow();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
    this.now = this.start;
    this.pos = this.state = 0;

    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !timerId ) {
        // Use requestAnimationFrame instead of setInterval if available
        if ( requestAnimationFrame ) {
            timerId = true;
            raf = function() {
                // When timerId gets set to null at any point, this stops
                if ( timerId ) {
                    requestAnimationFrame( raf );
                    fx.tick();
                }
            };
            requestAnimationFrame( raf );
        } else {
            timerId = setInterval( fx.tick, fx.interval );
        }
    }
},

저는 아직 1.6.4를 사용하고 있지 않아서 그 버전에 대해서는 잘 모릅니다.해당 버전이 아니라면 문제가 있어서 제거한 것 같습니다.

편집:

이 블로그 게시물을 읽어보면 1.6.3에서 삭제되어 1.7에 다시 배치되는 것처럼 들리고, 삭제된 주된 이유는 사람들이 애니메이션 대기열을 사용하여 "잘못"한 것들을 깨뜨렸기 때문입니다(아마도 의견의 문제일 것입니다).

언급URL : https://stackoverflow.com/questions/7999680/why-doesnt-jquery-use-requestanimationframe