[javascript] 자바스크립트 performance.now()

참고: https://blog.bitsrc.io/a-very-quick-introduction-to-performance-now-c95493e77d06

performance.now()에 대해 들어본적 있습니까?

이는 DOMHighResTimeStamp(High Resolution Time Stamp)를 리턴하는 Performance API의 메소드로, 즉 두 시점 사이의 소수점 값의 밀리초 단위 시간 값입니다.

performance.now()의 일반적인 사용 예는 코드가 실행되는 시간을 모니터링하는 것입니다. 실제 사용 사례로는 비디오, 오디오, 게임 및 기타 미디어의 벤치마킹 및 모니터링 등이 있습니다.

그럼 어떻게 작동하는지 알아보겠습니다. 일단 특정 기능이 실행되는 데 걸리는 시간을 모니터링하고 싶다고 가정해 보겠습니다.

performance.now()를 실행하고 그 다음 모니터링 하려는 함수를 실행한 다음 performance.now()를 다시 호출합니다. performance.now()의 두 인스턴스 모두 페이지 로드에 걸린 시간을 리턴해주고 이들의 시작 시간이 같기 때문에 코드를 실행하는 데 걸린 시간을 확인하려면 위해 두 함수 호출 간의 차이만 확인하면 됩니다.

const startTime = performance.now();

for (let i = 0; i < 1000; i++) {
  console.log("Hi!");
}

const finishTime = performance.now();

console.log(`"Hi!" 천 번 찍는데 ${finishTime - startTime} 밀리초 걸렸음`);

Date.now()를 동일한 용도로도 사용할 수 있습니다. 이는 성능 모니터링 시 효과적이고 일반적인 접근 방법이지만 한 가지 주의 사항이 있습니다.

performance.now()와 Date.now()의 가장 큰 차이점은 Date.now()는 Unix 시간(00:00:00 UTC, 1970년 1월 1일 이후 경과된 시간) 부터 경과된 타임스탬프를 반환한다는 것입니다. 이는 잠재적으로 문제가 있을 수 있습니다. 자바스크립트는 이 날짜 이후 얼마나 많은 시간이 경과했는지 알 수 없습니다. 이는 그냥 시스템 시계에서 가져오는 값 입니다. 하지만 시스템 시간은 우리 컴퓨터에 내장되어 있고 수동 또는 코드로 조정할 수 있으므로 시간 정밀도를 보장할 수 없습니다.

이 경우 performance.now()가 더 안정적입니다. document 라이프 사이클이 시작된 이후 경과된 밀리초 수를 리턴하기 때문에 과거의 특정 지점이나 시스템에 따라 달라지지 않습니다.

참고 사항: 보안상의 이유로 performance.now()에서 반환된 시간은 반올림된 값이므로 정확도가 조금 떨어질 수 있습니다. 그러나 개인적인 테스트에 사용하는 경우 이 정도 오차는 별로 중요하지 않습니다.

performance.now()는 Chrome 24, Firefox 15 및 IE10 이상의 모든 최신 브라우저를 완벽하게 지원합니다.