Performance: now() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

참고 : 이 기능은 Web Worker에서 사용할 수 있습니다.

performance.now() 메서드는 밀리초 단위의 고해상도 타임스탬프를 반환합니다. 이는 Performance.timeOrigin (윈도우 맥락에서는 탐색이 시작되었을 때의 시간이나 Worker 혹은 ServiceWorker 맥락에서는 워커가 진행된 시간) 으로부터의 시간 경과를 나타냅니다.

구문

js
now()

매개변수

없습니다.

반환 값

밀리초로 측정된 DOMHighResTimeStamp 값을 반환합니다.

설명

Performance.now vs. Date.now

Date.now와는 다르게, performance.now() 에 의하여 반환된 타임스탬프 값은 1 밀리초 해상도에 제한되지 않습니다. 대신에 이는 마이크로초 정밀도까지 표현될 수 있는 부동소수점으로 시간을 나타냅니다.

또한 Date.now() 는 유닉스 에포크 (1970-01-01T00:00:00Z) 기준이고, 시스템 시계에 의존하기 때문에 시스템과 시계 왜곡 등과 같은 사용자의 시계 조정에 영향을 받을 수 있습니다. 반면 performance.now() 메서드는 현재 시간이 감소하거나 조정되지 않는 모노토닉 시계timeOrigin 속성을 기준으로 합니다.

performance.now 명세 변경

performance.now() 메서드의 의미는 고해상도 시간 단계 1과 단계 2 사이에서 변화했습니다.

변경 사항 단계 1 단계 2
기준 performance.timing.navigationStart Performance.timeOrigin
발생 조건 문서 불러오기 혹은 언로드 프롬프트 (만일 있는 경우). (이전 문서가 없을 경우) 브라우저 맥락 생성, 언로드 프롬프트 (만일 있는 경우), 혹은 탐색 시작 (HTML에서 정의된 것처럼, 불러오기 몇 단계 전).

performance.now() 메서드는 Navigation Timing 명세의 performance.timing.navigationStart 속성을 기준으로 합합니다. 이는 performance.now() 가 지금은 Performance.timeOrigin 을 기준으로 하도록 변경되었습니다. 이는 웹 페이지 간의 타임스탬프를 비교할 때 시계 변경 위험을 피할 수 있습니다.

js
// 단계 1 (시계 변경 위험 있음)
currentTime = performance.timing.navigationStart + performance.now();

// 단계 2 (시계 변경 위험 없음)
currentTime = performance.timeOrigin + performance.now();

수면 중 틱

단계 2 명세는 performance.now() 의 수면 중 틱을 요구합니다. 수면 중 틱은 오직 윈도우에서 파이어폭스와 크로미움에서만 나타나는 것으로 보입니다. 다른 운영 체제에서 관련된 브라우저 버그는 다음과 같습니다:

명세서 상 더 많은 정보는 이슈 hr-time#115 에서 확인할 수 있습니다.

예제

performance.now() 사용하기

코드에서 특정한 시점으로부터 시간이 얼마나 경과했는지를 파악하기 위해 아래와 같은 코드를 작성할 수 있습니다.

js
const t0 = performance.now();
doSomething();
const t1 = performance.now();
console.log(`doSomething 호출에 걸린 시간은 ${t1 - t0} 밀리초.`);

보안 요구사항

타이밍 공격과 핑거프린팅 에 대비하기 위해 performance.now() 는 사이트 격리 상태에 따라 정밀도가 조정됩니다.

  • 격리된 맥락에서의 해상도: 5 마이크로초
  • 격리되지 않은 맥락에서의 해상도: 100 마이크로초

사이트를 교차 출처로부터 격리하기 위해 Cross-Origin-Opener-PolicyCross-Origin-Embedder-Policy 헤더를 사용합니다.

http
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

이 헤더들은 최상위 문서가 교차 출처 문서들과 브라우징 컨텍스트 그룹을 공유하지 않도록 보장합니다. COOP는 문서를 프로세스 단위로 격리하여 잠재적인 공격자가 팝업에서 이를 열더라도 전역 객체에 접근할 수 없게 하여 XS-Leaks 같은 교차 출처 공격을 방지합니다.

명세서

Specification
High Resolution Time
# dom-performance-now

브라우저 호환성

BCD tables only load in the browser

같이 보기