웹 페이지 로딩 성능의 심층 분석 : 내비게이션 타이밍에 대한 자세한 설명 api
탐색 타이밍 API는 DNS 조회, TCP 연결 설정, 페이지 리디렉션, DOM 구성 시간 및 기타 표시기를 포함하여 웹 페이지로드 중에 자세한 타이밍 정보를 제공합니다. 브라우저에 내장되어 있으며 추가 오버 헤드가 없습니다.
현재 내비게이션 타이밍 API는 Internet Explorer 9, Firefox 및 Chrome 만 지원합니다. 따라서 API를 사용하기 전에 브라우저 지원을 감지해야합니다. API는
객체에 정의됩니다.
API는 페이지 로딩 프로세스 중에 많은 이정표 이벤트의 타임 스탬프를 기록하며, 각 이벤트는 객체의 속성으로 저장됩니다. 이벤트가 발생하지 않으면 그 값은 0입니다. API는 또한 사용자가 특정 페이지에 액세스하는 방법을 결정하는 인터페이스를 정의합니다.
탐색 타이밍 API는 AJAX 호출과 함께 사용하여 실제 사용자 데이터를 서버에 다시보고 할 수 있습니다. 이를 통해 개발자는 페이지가 실제 환경에서 어떻게 작동하는지 이해할 수 있습니다. 이 데이터는 또한 페이지로드 프로세스의 시각적 차트를 만드는 데 사용될 수 있습니다. window.performance.timing
웹 페이지 로딩 속도는 사용자 경험에 영향을 미치는 주요 요소 중 하나입니다. 로딩 속도가 느리면 사용자를 실망시키고 이탈 할 수 있습니다. 그러나 사용자의 브라우저, 네트워크 조건, 서버로드 및 애플리케이션 코드 등과 같은 전체 로딩 시간에 영향을 미치기 때문에 많은 요인이 느린 로딩의 원인을 문제 해결하는 것은 일반적으로 쉽지 않습니다. 다행히도 내비게이션 타이밍 API는이 문제를 쉽게 해결하는 데 도움이 될 수 있습니다.
과거에는 개발자 가이 영역에서 수집 된 데이터에 대한 액세스가 매우 제한적이었습니다. 많은 개발자들이 오랫동안 JavaScript의 window.performance.timing 객체를 사용하여 성능 데이터를 수집했습니다. 예를 들어, 다음 코드는 페이지로드 이벤트 핸들러 호출 후 타임 스탬프를 비교하여 로딩 시간을 측정합니다.
이 방법에는 몇 가지 문제가 있습니다. 첫째, javaScript의 시간 정확도는 두 번째로, 객체는 셋째, 객체는 코드를 측정 할 수 있습니다 브라우저에서 실행 한 후 실행 시간은 서버, 네트워크 등과 같은 페이지로드 프로세스에 대한 데이터를 제공 할 수 없습니다.
내비게이션 타이밍 API 데뷔
보다 정확하고 포괄적 인 페이지로드 데이터를 제공하기 위해 W3C는 내비게이션 타이밍 API를 제안했습니다. 이 API는 페이지로드하는 동안보다 자세한 타이밍 정보를 제공합니다. 객체와 달리 내비게이션 타이밍 API는 DNS 조회, TCP 연결 설정, 페이지 리디렉션, DOM 빌드 시간 및 기타 다양한 메트릭과 관련된 측정 데이터를 제공합니다. 내비게이션 타이밍도 브라우저에 내장되어있어 추가 오버 헤드가 발생하지 않습니다.
Date 탐지 브라우저 지원
var start = new Date();
window.addEventListener("load", function() {
var elapsed = (new Date()).getTime() - start.getTime();
}, false); 로그인 후 복사
로그인 후 복사
현재 내비게이션 타이밍 API는 Internet Explorer 9, Firefox 및 Chrome 만 지원합니다. 따라서 API를 사용하기 전에 브라우저 지원을 감지해야합니다. API는 객체에 정의됩니다. 다음 기능은 API가 지원되는지 여부를 감지합니다.
window.performance.timing
<<> 녹음 된 이벤트 var start = new Date();
window.addEventListener("load", function() {
var elapsed = (new Date()).getTime() - start.getTime();
}, false); 로그인 후 복사
로그인 후 복사
API는 페이지로드 중에 많은 이정표 이벤트의 타임 스탬프를 기록합니다. 각 이벤트는 객체의 속성으로 저장됩니다. 다음 목록은 각 이벤트를 설명합니다. 이벤트가 발생하지 않으면 (예 : 페이지 리디렉션) 값은 0입니다. (참고 : Mozilla는이 사건 들이이 순서대로 발생한다고 주장합니다.)
: 브라우저가 이전 문서를 제거하기위한 프롬프트를 완료 한 후 시간. 이전 문서가없는 경우 navigationStart는 navigationStart와 같습니다. 이것은 사용자가 인식하는 페이지로드 시간의 시작입니다. fetchStart
: 브라우저가 URL을 찾기 시작하기 전의 순간. 검색 프로세스에는 응용 프로그램 캐시를 확인하거나 캐시되지 않은 경우 서버에서 파일을 요청하는 것이 포함됩니다.
: 브라우저가 URL DNS를 검색하기 시작하는 순간. DNS 조회가 필요하지 않은 경우 값은 와 동일합니다. fetchStart
: DNS 검색 후 즉각적인 시간이 완료되었습니다. DNS 조회가 필요하지 않은 경우 값은 와 동일합니다.
: 브라우저가 서버에 연결되는 순간. URL이 캐시 또는 로컬 리소스 인 경우 값은 domainLookupStart와 같습니다. fetchStart
: 서버와의 연결을 설정 한 후 즉각적인 시간. URL이 캐시 또는 로컬 리소스 인 경우 값은 와 동일합니다.
: https 프로토콜을 사용하는 경우 domainLookupEnd는 보안 핸드 셰이크가 시작되기 전에 즉각적인 시간을 설정합니다. 브라우저가 HTTPS를 지원하지 않으면이 값은 fetchStart이어야합니다.
: 브라우저가 URL 요청을 보내기 전의 순간 시간. API undefined connectStart
domainLookupEnd : 리디렉션을 시작하는 URL 페치의 시작 시간.
: 리디렉션이 존재하면 connectEnd는 마지막으로 리디렉션 된 응답의 마지막 바이트 이후의 시간을 나타냅니다. domainLookupEnd
: 브라우저가 응답의 첫 바이트를 수신 한 후 즉각적인 시간.
secureConnectionStart : 브라우저가 응답의 마지막 바이트를 수신 한 후 즉각적인 시간. secureConnectionStart
undefined : 이전 문서의 이전의 순간이 트리거되었습니다. 이전 문서가 없거나 이전 문서가 다른 소스에서 나오는 경우이 값은 0입니다.
requestStart : 이전 문서의 requestEnd 이후의 순간이 트리거됩니다. 이전 문서가 없거나 이전 문서가 다른 소스에서 나오는 경우이 값은 0입니다. 다른 소스에 대한 리디렉션이 있으면 와 모두 0입니다.
redirectStart : 값이 "로드"로 설정되기 전의 순간.
: redirectEnd 값의 즉각적인 시간은 "대화식"으로 설정됩니다. redirectEnd
: domcontentloaded 이벤트가 트리거되기 전의 순간.
responseStart : domcontentloaded 이벤트가 트리거 된 후 즉각적인 시간이 트리거됩니다.
: 값이 "완료"로 설정되기 전의 순간. domComplete
document.readyState : 창의 하중 이벤트 전 순간이 트리거됩니다. 이벤트가 해고되지 않으면 값은 0입니다.
: 창의 하중 이벤트 후 즉시 트리거됩니다. 이벤트가 해고되지 않았거나 여전히 실행중인 경우 값은 0입니다. loadEventStart
탐색 유형
탐색 타이밍 API는 사용자가 특정 페이지에 액세스하는 방법을 결정하는 인터페이스를 정의합니다. 객체에는 또한 두 개의 특성 - loadEventEnd 및 가 포함 된 속성은 사용자가 현재 페이지로 이동할 수있는 방법을 제공합니다. 다음 목록은
에 의해 저장된 값을 설명합니다.
사용자가 URL을 입력하거나 링크를 클릭하거나 양식을 제출하거나 스크립팅 조치를 사용하여 페이지를 항해하는 경우 의 값은 0입니다.
사용자가 페이지를 다시로드/새로 고침하면 는 1입니다.
사용자가 히스토리 (뒤 또는 전진 버튼)를 통해 페이지로 이동하면 가 2와 같습니다.
다른 경우 는 255와 같습니다.
window.performance
속성에는 현재 페이지로 탐색 된 리디렉션 수가 포함되어 있습니다. 리디렉션이 발생하지 않거나 리디렉션이 다른 소스에서 나오는 경우 navigation는 0입니다. 다음 예는 내비게이션 데이터에 액세스하는 방법을 보여줍니다.
type
데이터 해석 redirectCount
탐색 타이밍 API를 사용하여 페이지로드 시간의 특정 구성 요소를 계산할 수 있습니다. 예를 들어, DNS 조회를 수행하는 데 걸리는 시간은 에서 type를 빼서 계산할 수 있습니다. 다음 예제는 몇 가지 유용한 메트릭을 계산합니다. "Usertime"은 사용자 경험의 총 페이지로드 지연에 해당합니다. "DNS"및 "Connection"변수는 각각 DNS 조회를 수행하고 서버에 연결하는 데 걸리는 시간을 나타냅니다. "요청 타임"은 서버로 전송 된 총 시간을 저장하고 응답을 받았습니다. 마지막으로 "FetchTime"은 문서 획득을 완료하는 데 총 시간을 저장합니다 (캐시에 대한 액세스 등). Window Load Event Handler에서 기능이 호출됩니다. 이렇게하면 내비게이션 타이밍 데이터가로드 이벤트가 완료된 순간 만 사용되도록합니다. 로드 이벤트 핸들러에서 타이밍 데이터에 액세스하면 type의 값이 0이됩니다.
탐색 타이밍 API는 AJAX 호출과 함께 사용하여 실제 사용자 데이터를 서버에 다시보고 할 수 있습니다. 이것은 개발자가 실제 환경에서 페이지가 어떻게 작동하는지 이해할 수 있기 때문에 유용합니다. 이 데이터는 또한 페이지로드 프로세스의 시각적 차트를 만드는 데 사용될 수 있습니다. 실제로 Google 웹 로그 분석에는 보고서에 내비게이션 타이밍 데이터가 포함되어 있습니다.
기억하는 핵심 사항 type
javaScript의 객체는 브라우저에서 실행하기 전에 요청을 알지 못하기 때문에 페이지로드 데이터를 정확하게 측정 할 수 없습니다. Date
탐색 타이밍 API는 브라우저에 내장되어 있으며보다 자세한 타이밍 측정을 제공합니다.
API는 사용자가 페이지로 이동하는 방법도 추적합니다.
탐색 타이밍 데이터는 분석을 위해 서버로 전송 될 수 있습니다.
(내비게이션 타이밍에 대한 FAQ 섹션은 여기에 추가 할 수 있으며 필요에 따라 원본 문서에서 내용을 추출하여 다시 작성할 수 있습니다)
위 내용은 프로파일 링 페이지는 내비게이션 타이밍 API로로드됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
코어 포인트 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
