리소스 타이밍 API 소개

리소스 타이밍 API : 웹 성능 측정에 대한 깊은 다이빙

이 기사는 웹 페이지에서로드 된 리소스에 대한 자세한 타이밍 정보를 수집하기위한 강력한 도구 인 리소스 타이밍 API를 탐색합니다. 이 데이터를 이해하는 것은 웹 페이지 성능을 최적화하고 사용자 지연 시간을 줄이는 데 중요합니다. 주요 개념 :

포괄적 인 타이밍 데이터 :

API는 각 리소스에 대해 세분화 된 타이밍 정보를 제공하여 높은 수준의 메트릭을 훨씬 초과합니다. 이를 통해 성능 병목 현상을 정확하게 식별 할 수 있습니다 를 통한 액세스 : API는 객체의

속성을 ​​통해 액세스하며 메소드를 인수 '리소스'와 함께 사용하여 액세스합니다. 객체 : 메소드는 객체의 배열을 반환하고 각각의 단일 리소스의 로딩 프로세스를 자세히 설명합니다. 광범위한 브라우저 지원 :

API는 주요 브라우저 (Chrome, Internet Explorer, Opera 등)에서 좋은 지원을 즐깁니다. 그러나 지원의 검증이 필요합니다.

• 타사 리소스 고려 사항 : API는 1 자 및 타사 리소스와 함께 작동하는 동안 타사 리소스에 대한 자세한 타이밍 데이터에는 HTTP 헤더가 필요합니다. 그것 없이는 총 기간 만 사용할 수 있습니다.
• 데이터 이해 : window.performance 각각의 객체는 다음을 포함하여 다양한 속성을 제공합니다 performance : 리소스의 URL : 브라우저가 리소스를 가져 오기 시작하기 전의 시간 : 자원을로드하는 데 걸린 총 시간 : 리소스 요청을 시작한 요소를 나타냅니다 (예를 들어, , window, getEntriesByType(),
). 기타 속성 세부 사항 세부 사항 특정 단계 : ,
• , , , , PerformanceResourceTiming, , getEntriesByType(), PerformanceResourceTiming,
,
• . 이 타이밍 단계의 시각적 표현은 다음과 같습니다.
API 사용 및 브라우저 호환성 :
• API 지원 테스트를 위해서는 및

  의 존재를 확인하고 window.performance가 배열을 반환하는지 확인해야합니다. 이 점검을위한 간단한 코드 스 니펫은 다음과 같습니다 window.performance.getEntriesByType() API 기능을 보여주는 기본 데모는 리소스 (예 : 이미지 및 스크립트)를로드 한 다음 페이지로드시 window.performance.getEntriesByType('resource') 객체를 반복하여 수집 된 데이터를 표시함으로써 생성 할 수 있습니다.

  결론 :

  if (!('performance' in window) ||
      !('getEntriesByType' in window.performance) ||
      !(window.performance.getEntriesByType('resource') instanceof Array)) {
      // API not supported
  } else {
      // API supported
  }

  리소스 타이밍 API는 자세한 성능 분석을위한 강력한 메커니즘을 제공합니다. 자원로드에서 병목 현상을 식별함으로써 개발자는 웹 사이트 속도와 사용자 경험을 크게 향상시킬 수 있습니다. 브라우저 지원은 일반적으로 양호하지만이 API에 의존하기 전에 호환성을 테스트하는 것이 중요합니다. 타사 자원에 대한 제한 사항도 고려해야합니다.

  PerformanceResourceTiming 자주 묻는 질문 (faqs) :

  원본 텍스트의 FAQ 섹션은 크게 변하지 않으며 귀중한 추가 정보를 제공합니다. 완전성을 위해 여기에 포함시키는 것이 좋습니다. (FAQ 섹션은 여기서 재생하기에는 너무 길지만 입력 텍스트에서 직접 복사해야합니다.)

위 내용은 리소스 타이밍 API 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!