성능 API로 사이트를 더 빨리 만드는 방법

이 튜토리얼은 성능 API를 활용하여 웹 응용 프로그램과 상호 작용하는 실제 사용자의 자세한 성능 메트릭을 캡처하는 방법을 보여줍니다. 브라우저 DevTools는 성능 통찰력을 제공하지만 사용자가 다양한 장치, 위치 및 네트워크 연결에서 경험하는 다양한 실제 조건을 정확하게 반영하지 않습니다. 성능 API의 핵심 이점 :

실제 정확도 :

성능 API는 고립 된 DevTools 테스트와 비교하여 응용 프로그램 성능에 대한 훨씬 더 현실적인 그림을 제공합니다. 포괄적 인 메트릭 : 탐색, 리소스로드, 렌더링 및 사용자 정의 응용 프로그램 로직 실행 시간을 포함한 페이지 라이프 사이클 전체에 걸쳐 메트릭을 캡처합니다. 고해상도 타이밍 : 고해상도 타이머를 사용하여 밀리 초 분획으로 타이밍을 기록하고 리디렉션 및 DNS 조회 시간과 같은 세부 사항을 캡처하여 표준 타이머로 불가능합니다.

사용자 정의 가능한 측정 : 클라이언트 측 JavaScript, 웹 워커, Deno 및 Node.js. 크로스 플랫폼 분석 :

실제 사용자 장치 및 네트워크에서 성능 측정을 가능하게하여 병목 현상 식별 및 성능 최적화를 단순화합니다.

• 성능 API 이해 : 성능 API는 버퍼를 사용하여 성능 메트릭을 웹 페이지 수명주기의 주요 단계에서 개체로 저장합니다.
페이지 내비게이션 :
• 는 리디렉션, 연결, 핸드 셰이크 및 DOM 이벤트를 기록합니다 리소스 로딩 : 는 이미지, CSS, 스크립트 및 Ajax 호출과 같은 자산의 로딩 시간을 추적합니다. 페인트 메트릭 : 브라우저 렌더링 정보 (예 : 첫 번째 콘텐츠 페인트). 사용자 정의 성능 :
자의적 애플리케이션 처리 시간을 측정하여 느린 함수를 정확히 찾아냅니다.
• API 지원은 다음과 같이 확인할 수 있습니다 참고 : API의 대부분을 구현하더라도 모든 방법에 대한 Safari의 지원이 완료되지 않습니다. 모듈 사용) 및 Deno에서도 사용할 수 있습니다. (필요 )
• 너머 :
• 는 경과 시간을 측정 할 수 있지만 밀리 초 정밀도와 시스템 시간에 대한 의존 (OS 조정에 취약한)은 정확도를 제한합니다. 성능 API의 고해상도 타이머 및 추가 메트릭 (리디렉션 및 DNS 시간 등)은 탁월한 세부 사항을 제공합니다. 메트릭 기록 및보고 : 클라이언트 측 성능 데이터에는 대상이 필요합니다. Ajax, Fetch, Xmlhttprequest 또는 Beacon API를 사용하여 분석을 위해이 데이터를 서버로 보낼 수 있습니다. 많은 분석 플랫폼은 또한 타이밍 기록을위한 맞춤형 이벤트 API (예 : Google Analytics User Timings API)를 제공합니다. 페이지 탐색 타이밍 :

  빠른 연결에 대한 테스트는 실제 사용자 경험을 반영하지 않습니다. 내비게이션 타이밍 API는 사용자가 관찰 한 바와 같이 리디렉션,로드 시간, 파일 크기, DOM 이벤트 등에 대한 자세한 정보가 포함 된

  객체를 제공합니다. : 를 사용 하여이 객체에 액세스하십시오

  또는 둘 다 읽기 전용 속성을 포함하는 단일 객체가있는 배열을 반환합니다.

  페이지 리소스 타이밍 :

  리소스 타이밍 API는로드 된 각 자산 (이미지, CSS, 스크립트 등)에 대해 PerformanceNavigationTiming 객체를 제공합니다. 사용 : <.>

  이것은 내비게이션 타이밍과 유사한 타이밍 속성이 있지만 내비게이션 및 DOM 이벤트 데이터가없는 객체 배열을 반환합니다.

  .

  를 사용하여 개별 자원에 액세스 할 수 있습니다 예 : CSS 파일로드 시간 및 크기 분석 :

  if ('performance' in window) {
    // Use Performance APIs
  }

  <<> 브라우저 페인트 타이밍 : <🎜 🎜> <🎜 🎜> 페인트 타이밍 API는 지각 된 성능을 평가하는 데 중요합니다. 다음과 같이 액세스하십시오

  <🎜 🎜> <<> 사용자 타이밍 (사용자 정의 메트릭) : <🎜 🎜>

  const pagePerf = performance.getEntriesByType('navigation');

  성능 API를 사용하면 ,

  및 를 사용하여 애플리케이션 함수의 사용자 정의 타이밍을 허용합니다. 는 고해상도 타임 스탬프를 제공합니다. 는 성능 버퍼에 명명 된 마커를 생성하고 startTime는 마커 간의 지속 시간을 계산합니다. 성능 항목을 비동기 관찰 할 수 있습니다 자체 프로파일 핑 API : duration 자체 프로파일 API (아직 개발 중)는 수동 마커 배치없이 잠재적 병목 현상을 식별하여 실행을 자동으로 샘플링하여 성능 분석을 단순화합니다. domComplete 결론 :

  성능 API는 개발자가 실제 사용자 데이터를 기반으로 웹 애플리케이션 성능을 정확하게 측정하고 개선하여 대상 최적화 및 우수한 사용자 경험을 가능하게합니다. 최신 정보 및 특정 속성 세부 정보에 대한 자세한 문서를 참조하십시오.

위 내용은 성능 API로 사이트를 더 빨리 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!