특정 애니메이션, CSS, 애니메이션 GIF 및 "JS 애니메이션"이있는 웹 사이트가 있습니다. 일부 휴대 기기에서는 애니메이션이 느려서 CSS 애니메이션을 감지하고 대신 gif 애니메이션에 정적 이미지를 사용하고 싶습니다.애니메이션을 켜거나 끄는 측정 브라우저 성능을위한 자바 스크립트
모바일 장치 브라우저는 CSS 애니메이션을 지원하지만 실행시 느립니다.
자바 스크립트 기능을 사용하여 실제 브라우저 성능을 측정하려면 어떻게해야합니까? 애니메이션을 켜거나 끌지 여부를 결정할 수 있습니까? 어떤 자바 스크립트 라이브러리라도 될까요?
함수의 성능을 테스트하는 유일한 방법은 함수를 실행하는 것입니다. 다음과 같은 일종의 초기 테스트를 설정할 수 있습니다.
var startTime = new Date();
possiblySlowFunction();
if (new Date() - startTime > maxAcceptableTime) {
disableCSSAnimations();
}
아이디어가 실행되면 테스트 실행을 통해 성능이 얼마나되는지 판단 할 수 있습니다. 시간이 오래 걸리면 다시 사용하지 못하게하십시오.
편집 : 나는이 답변으로 약간의 가정을하고 있습니다. 이것이 당신이 작성한 함수라면, 먼저 함수의 어느 부분이 가장 오래 걸리는지 알아 내야 할 것입니다. 그런 다음 위에 나온 것과 같은 테스트로 해당 섹션을 분리하고 함수가 충분히 잘 수행되는지 확인하기위한 좋은 번호를 찾을 수 있습니다.
예를 들어, 픽셀 단위로 캔버스를 변경해야하는 애니메이션이 있습니다. 실제 캔버스보다 10 배 작은 캔버스에서 실행되는 테스트를 설정하고 동일한 알고리즘을 실행할 수 있습니다. 이제는 작은 캔버스에 걸리는 시간의 벤치 마크를 얻었으므로 그 시간을 가져 와서 10을 곱하십시오. 해당 애니메이션에 적합한 시간입니까? 그렇지 않으면 픽셀 별 캔버스 애니메이션을 비활성화하십시오. 이 아이디어는 모든 종류의 기능, 애니메이션 또는 기타 용도로 사용될 수 있습니다.
var t0 = performance.now();
your_function();
var t1 = performance.now();
console.log("Call to your_function took " + (t1 - t0) + " milliseconds.");
그리고 콘솔의 출력을 읽어
그러면 브라우저를 잠그지 않아 브라우저가 잠기지 않도록 브라우저를 잠그는 것이 좋습니다. –
정확하지 않습니다. 나는이 하나의 함수가 빠른 함수가 아닌 더 작은 집합이거나 큰 데이터 집합의 내장 함수라고 가정했다. 합리적인 크기의 데이터 세트에 내장 된 기능 중 가장 약한 하드웨어조차도 몇 밀리 초 이상 걸리지는 않습니다. 나는 그 정보를 포함하도록 대답을 업데이트 할 것이다. –
performance.now는() 날짜를 사용하는 것보다 더 정확합니다.
특히 iPhone에있는 경우 [performance.now가 지원 될 수 있습니다.] (https://developer.mozilla.org/en-US/docs/Web/API/Performance.now())에 유의하십시오. –
귀하의 코멘트 주셔서 감사합니다, 나는 몰랐다 :) – Simon
예를 들어 경고를 제공하여 브라우저가 잠겨있는 경우 사용자가 차단하도록 결정할 수 있습니다. 로그인시 –
JS 함수의 성능을 측정 할 수 있지만 gif 애니메이션이 느린 지 어떻게 알 수 있습니까? 또는 CSS 전환이 느립니까? 어쨌든 성능을 테스트하기 위해 MyFnction()에 포함 시키려면 javascript를 통해 gif 또는 CSS ransition에 대한 현재 프레임 속도를 얻으시겠습니까? – edteke