JavaScript가있는 느린 하드웨어/느린 브라우저 감지

Question

내 웹 사이트에는 일부 브라우저 (고맙게도 대다수는 아닙니다) 및 특정 구형 하드웨어에서 매우 느리게 렌더링되는 여러 CSS 애니메이션과 전환이 있습니다. 나는 UA 스니핑을 피하려고 노력하고있다. 자바 스크립트 또는 JS 라이브러리를 사용하여 브라우저 또는 하드웨어 구성을 감지하고 이후에 이러한 기능을 제대로 지원하지 않는 브라우저에 애니메이션이 아닌 버전을로드하는 방법이 있습니까?

모호성을 없애기 위해 나는 Modernizr과 같은 것을 찾고 있지 않습니다. 요소를 오프로드,

Use CSS transitions하고 (필요에 따라 클래스를 전환하여)와 jQuery를 트리거이 더입니다

Answer 1

는 에 충분한 속도가 느린 시스템을 감지하지만, 이러한 시스템의 사용자에 대한 영향을 최소화 할 수 의미 애니메이션을 렌더링 엔진에 전달하여 페이지의 기능적 응답이 적어도 어려움을 겪지 않도록합니다.

올바른 CSS 속성은입니다. 예를 들어 top:10px;left:10px; 속성에 애니메이션을 적용하는 대신 CSS transformtransform: translateX(10px) translateY(10px)을 사용하면 더 효율적입니다.

대상 요소에 transform: translate3d(0,0,0); 또는 비슷한 해결 방법을 추가하여 하드웨어 가속 (GPU)을 트리거하십시오. 당신이 절대적으로 애니메이션에 부착, 또는 어떤 이유로 CSS없이 대체 기능 (숨기기/쇼/요소의 위치를) 실행하는 데 필요한 경우

, you could try a Modernizr workaround :

if(!Modernizr.csstransitions) { 
    /*fallback logic*/ 
}