네비게이션 타이밍 API를 사용하여 클라이언트로부터 성능 지표 전송⚡

모든 사람들은 웹 페이지를 신속하게 불러오는 것을 좋아한다.사실 구글은 성능과 회사가 어떻게 더 빠른 네트워크로 나아가는지에 주력하는 entire section 를 가지고 있다.만약 우리가 생산 환경에서 일부 관건적인 지표(예를 들어 페이지 불러오는 시간)를 측정하고 그것들을 끊임없이 감시하여 개선할 수 있는 부분을 찾아낼 수 있다면 이것은 좋지 않겠는가?

탐색 시간 API

Navigation Timing API는 클라이언트의 성능을 정확하게 측정하는 JavaScript API입니다.그리고 이 데이터를 서버에 전송하여 성능 지표를 실시간으로 감시할 수 있다.
API는 간단한 방법을 제공하여 본 컴퓨터에서 페이지 내비게이션과 이벤트를 불러오는 정확하고 상세한 시간 통계 정보를 얻을 수 있다.이 API는 페이지 로드 시간, 이전 페이지를 마운트 해제하는 데 걸리는 시간, 도메인 검색에 필요한 시간 등의 지표를 측정합니다.

어떻게 사용합니까?

이 API에는 두 개의 인터페이스Performance와 PerformanceNavigationTiming가 있습니다.window.performance 속성은 Performance 인터페이스를 되돌려줍니다. 이 인터페이스는 High Resolution API 정의에 따라 두 개의 추가 속성을 추가합니다.

시간: 내비게이션과 페이지에 이벤트의 데이터를 불러옵니다.

탐색: 사용자가 페이지를 탐색하는 방법입니다.

브라우저 콘솔에서 이 API(Windows에서 Ctrl+Shift+J 키, Mac에서 CMD+Option+J 키)를 시도할 수 있습니다.

> performance

너는 이런 물체를 볼 수 있을 것이다.

날짜 대상의 더 좋은 대체품

역사적으로 우리는 Date 대상을 사용하여 시간 측정을 했다. 예를 들어 다음과 같다.

let start = Date.now();

이 페이지의 끝:

console.log(`It took: ${Date.now() - start} ms for the page to load!`);

그러나 몇 가지 이유로 이것은 매우 저효적이다.우선, 시간 코드는 페이지에 있으며, 그 자체는 시간이 필요하고, 성능에 영향을 미친다.또한 자바스크립트 시간은 not accurate 임을 알아야 합니다.또한 사용자의 체험에 접근하지 않습니다. 최악의 경우 페이지가 불러오기 전에 Date 대상을 사용하여 네트워크 지연을 측정할 수 없습니다.
페이지가 불러오기 전에 발생한 이벤트, 예를 들어 DNS 해석, 방향 재정의, 서버 응답 시간 등은 기술적으로 인라인 코드를 통해 평가할 수 없습니다. 코드가 도착하지 않았기 때문입니다.

탐색 정시 API FTW

performance.timing의 모든 속성은 내비게이션 이벤트 시간, 예를 들어 요청 페이지의 시간을 표시합니다👉🏼 requestStart 또는 페이지 로드 이벤트(예: DOM 로드 시작 시👉🏼 domLoadingms, 1970년 1월 1일 UTC 자정 이후.
💡 zero값은 이벤트가 발생하지 않았음을 나타냅니다.redirectStart이나 secureConnectionStart 같은 사건은 아예 일어나지 않을 수도 있다.
이 이벤트에 대한 자세한 내용은 W3C Recommendation 을 참조하십시오.
위 문서의 다음 그림에서 이러한 이벤트의 순서를 볼 수 있습니다.

몇몇 용례

이제 이런 유용한 속성을 어떻게 사용하여 지표를 계산하는지 봅시다.

총 페이지 로드 시간

총 페이지 로드 시간을 계산하기 위해 loadEventEnd 및 navigationStart 속성을 사용할 수 있습니다.

const perfObj = window.performance.timing;

let pageLoadTime = perfObj.loadEventEnd - perfObj.navigationStart;

페이지 표시 시간

페이지를 표시하는 데 걸리는 총 시간을 계산하려면 domComplete 및 domLoading 속성을 사용하십시오.

const perfObj = window.performance.timing;

let renderTime = perfObj.domComplete - perfObj.domLoading;

요청 응답 시간

요청부터 응답 검색 종료 사이의 시간을 계산하려면 다음과 같이 하십시오.

const perfObj = window.performance.timing;

let renderTime = perfObj.responseEnd - perfObj.requestStart;

네트워크 지연

네트워크 지연을 측정하려면 다음과 같이 하십시오.

const perfObj = window.performance.timing;

let renderTime = perfObj.responseEnd - perfObj.fetchStart;

탐색 및 페이지 로드

탐색 및 페이지 로드 시간의 합계를 얻으려면:

const perfObj = window.performance.timing;

let renderTime = perfObj.loadEventEnd - perfObj.navigationStart;

재정비 문제를 규명하다.

리디렉션에 대한 자세한 내용은 다음과 같습니다.

const perfObj = window.performance.timing;

let renderTime = perfObj.redirectEnd - perfObj.redirectStart;

탐색 속성

한 페이지에서 끝낼 수 있는 방법은 매우 많다.만약 사용자가 어떻게 당신의 페이지에 나타났는지, 혹은 그들이 페이지에 로그인하기 전에 몇 번이나 방향을 바꾸었는지 알고 싶다면, 이 속성은 당신의 친구입니다.performance.navigation 두 가지 속성이 있습니다.

redirectCount: 문서에 요청한 횟수를 다시 지정합니다.

유형: 이 페이지에 대한 탐색 유형입니다.

type 속성은 하나enum로 세 가지 값을 가질 수 있습니다.

0: 링크를 클릭하거나 브라우저 주소 표시줄에 URL을 입력하는 등의 사용자 작업

1: 페이지를 다시 로드합니다.

2: 브라우저 기록을 탐색합니다.

총결산

네비게이션 타이머 API를 사용하여 클라이언트의 성능 지표를 얻는 방법을 보았습니다. 이 지표들은 서버에 전송되어 사용자의 성능을 실시간으로 감시할 수 있습니다. 그들이 어디에 있든지 그들이 어떻게 거기에 도착하든지 간에.이 API는 정말 강력합니다. 이것은 저에게 많은 도움을 주었고 고객들이 어떤 페이지에서 성능을 향상시키는 데 집중해야 하는지 찾을 수 있도록 도와줍니다😍.
도움이 됐으면 좋겠어요. 다음까지 안녕히 계세요.👋.