대화 형 클라이언트 측에 걸리는 시간을 어떻게 계산할 수 있습니까?

마이클 크렌쇼

Chrome의 Lighthouse 도구와 WebPageTest는 "TTI (Time-to-Interactive)"메트릭을 제공합니다.

Google은 TTI에 대한 최소한의 정의를 제공 합니다 .

Time to Interactive는 레이아웃이 안정화되고 주요 웹 폰트가 표시되며 사용자 입력을 처리 할 수있을만큼 메인 스레드를 사용할 수있는 지점으로 정의됩니다.

이 측정 항목은 초기 단계에 있으며 변경 될 수 있습니다.

WebPageTest 는이를 "첫 번째 상호 작용 시간"과 "일관된 상호 작용 시간"으로 나눕니다 .

일관된 대화식 계산 시간

  • 콘텐츠가있는 첫 번째 페인트 또는로드 된 DOM 콘텐츠 중 큰 부분에서 TTI 찾기 시작
  • 진행중인 요청이 2 개 이하인 대화 형 창에 완전히 포함 된 5 초의 연속 기간이있는 첫 번째 대화 형 창을 찾습니다.
  • TTI는 2 단계의 대화 형 창 시작 또는 검색 시작 지점 중 나중 시점입니다.

첫 번째 대화식 계산

  • 콘텐츠가있는 첫 번째 페인트 또는로드 된 DOM 콘텐츠 중 큰 부분에서 TTI 찾기 시작
  • 진행중인 요청의 수에 관계없이 대화 형 창에 완전히 포함 된 5 초의 연속 기간이있는 첫 번째 대화 형 창을 찾습니다.
  • TTI는 2 단계의 대화 형 창의 시작 또는 검색 시작 지점 중 나중 시점입니다.

WebPageTest의 두 가지 다른 TTI 메트릭 클라이언트 측을 계산하여 API로 다시 보내고 싶습니다 ( RUM 목적으로).

현재 JavaScript API로 이러한 계산이 가능합니까? 그렇다면 어떻게?

최신 정보:

만족스러운 클라이언트 측 솔루션을 찾지 못했지만 TTI에 대한보다 심층적 인 정의를 찾았습니다 .

마이클 크렌쇼

GoogleChromeLabs는 TTI 측정 항목에 대한 polyfill을 제공합니다 .

브라우저는 결국 내장 API를 통해 측정 항목을 노출합니다.

참고 :이 스 니펫은 브라우저가 Performance Observer 사양의 레벨 2를 구현하고 buffered플래그를 포함 할 때까지 임시 해결 방법 입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

JavaScript에서 동기식 http 요청에 걸리는 시간을 어떻게 측정 할 수 있습니까?

클라이언트 측 JavaScript 파일에서 클라우드 기능의 형식이 지정된 파일 이름을 어떻게 참조할 수 있습니까?

스크립트를 실행하고 생성하는 이메일에 포함하는 데 걸리는 시간을 어떻게 측정 할 수 있습니까?

JIRA 이슈 트래킹 시스템에서 버그 리포트에 대한 버그 수정 시간을 어떻게 계산할 수 있습니까?

Django의 '클라이언트'와 Selenium의 웹 드라이버간에 사용되는 html / 세션을 어떻게 동기화 할 수 있습니까?

Django의 '클라이언트'와 Selenium의 웹 드라이버간에 사용되는 html / 세션을 어떻게 동기화 할 수 있습니까?

Xpages 클라이언트에서 Xpage의 URL을 어떻게 계산할 수 있습니까?

클라이언트 측에서 쉽게 계산할 수있는 데이터를 ViewModel에 넣어야합니까?

.net 코어 앱 내에서 IotEdge 모듈에 대한 계산을 어떻게 트리거 할 수 있습니까?

이 Linux 인터럽트 처리기가 실행되는 데 걸리는 시간을 어떻게 측정 할 수 있습니까?

.NET 서버는 파일 처리 결과를 클라이언트 측 jQuery에 어떻게 푸시 할 수 있습니까?

같은 앱의 관리자 및 클라이언트에 대해 다른 화면을 사용하여 관리자 및 클라이언트 모두에 대해 내 Android 앱을 어떻게 구현할 수 있습니까?

numpy에서이 함수에 대한 계산을 어떻게 최적화 할 수 있습니까?

Html 버튼 또는 가능하지 않은 경우 대안으로 NodeJS 서버 클라이언트 측을 어떻게 실행할 수 있습니까?

stash에서 클라이언트 측 githook을 어떻게 사용할 수 있습니까?

서버에 액세스 할 수없는 경우 클라이언트 측에서 소켓 연결을 어떻게 닫을 수 있습니까?

알고리즘이 실행되는 동안 걸리는 경과 시간을 어떻게 측정 할 수 있습니까?

node-postgres에 대한 클라이언트 또는 풀 중에서 어떻게 선택할 수 있습니까?

카메라 기반 상대 포즈 측정의 공분산을 어떻게 계산할 수 있습니까?

서버는 어떻게 데이터를 클라이언트에 푸시 할 수 있습니까?

스크립트에서 대화 형 쉘에 함수가 있는지 어떻게 확인할 수 있습니까?

클라이언트 측 데이터를 저장하려는 webView에서 URL을 어떻게로드 할 수 있습니까?

이 문제에 대한 유형을 어떻게 선언 할 수 있습니까?

arctan2 함수는 시간에 대해 어떻게 계산할 수 있습니까?

VSCode 디버거에서 대화 형 콘솔을 어떻게 시뮬레이션 할 수 있습니까?

ATS에서 함수 호출을 실행하는 데 걸리는 시간을 어떻게 측정 할 수 있습니까?

Java에서 일부 라인을 실행하는 데 걸리는 시간을 어떻게 알 수 있습니까?

MySQL 클라이언트에서 사용하는 연결 방법을 어떻게 확인할 수 있습니까?

이 계산을 C #에서 어떻게 할 수 있습니까?

TOP 리스트

  1. 1

    C # 16 진수 값 0x12는 잘못된 문자입니다.

  2. 2

    Matlab의 반복 Sortino 비율

  3. 3

    Python의 csv 파일에서 첫 번째 열 삭제

  4. 4

    개체 참조가 개체의 인스턴스로 설정되지 않았습니까? (예외 오류 ~ ASP.NET MVC)

  5. 5

    atob은 인코딩 된 base64 문자열을 디코딩하지 않습니다.

  6. 6

    EventEmitter <string>의 컨텍스트 'this'가 Observable <string> 유형의 'this'메서드에 할당되지 않았습니다.

  7. 7

    병합 셀을 사용하여 워크 시트의 데이터 필터링

  8. 8

    PhpStorm 중단 점에서 변수 값을 볼 수 없습니다.

  9. 9

    jQuery에서 이벤트 핸들러를 제거하는 가장 좋은 방법은 무엇입니까?

  10. 10

    `@ Transactional`이 있음에도 불구하고 이러한 데이터베이스 수정 사항이 롤백되지 않는 이유는 무엇입니까?

  11. 11

    ssh를 사용하여 원격에서 로컬로 파일 복사

  12. 12

    종속 사용자 정의 Lightning 선택 목록 Level2 및 Level3을 설정한 다음 Lightning 구성 요소에서 Level2를 재설정하지만 Level2 캐시 데이터가 저장됨

  13. 13

    2 개의 이미지를 단일 평면 이미지로 결합

  14. 14

    팝업처럼 위젯을 표시하는 방법

  15. 15

    [해결] 쿠키 설정 SameSite = Chrome / JSP, JAVASCRIPT에서 작동하지 않습니다.

  16. 16

    버튼 클릭을 기반으로 특정 CSS 클래스를 추가하는 방법은 무엇입니까?

  17. 17

    React 구성 요소가 자동으로 초기 상태로 다시 렌더링됩니다.

  18. 18

    연결된 서버 쿼리는 작동하지만 동일한 OPENQUERY는 "sys.servers에서 서버 'SERVER'를 찾을 수 없습니다.

  19. 19

    파일 2의 파일 1에서 동일한 줄을 조건으로 바꿉니다.

  20. 20

    아이디어 Intellij : 종속성 org.json : json : 20180813을 찾을 수 없음, maven에서 org.json 라이브러리를 가져올 수 없음

  21. 21

    상황에 맞는 메뉴 색상

뜨겁다태그

보관