Chrome DevTools는 상호 작용의 반응을 어떻게 측정합니까?

Question

크롬에서 사용자 상호 작용 대기 시간을 측정하려고합니다. 키를 눌러 화면을 업데이트하는 시간입니다. 이 예에서는 새로운 내용으로 화면의 많은 부분을 다시 렌더링합니다. 네트워크 지연이 없습니다. 단지 HTML을 업데이트하는 것입니다.

아래의 스크린 샷에서 Chrome DevTools 키 다운 이벤트를 볼 수 있으며 많은 자바 스크립트가 실행 된 다음 페인팅, 합성 등이 번거롭고 keydown 이벤트 "응답"기간이 끝납니다.

크롬이 GPU와 새로운 화면에 새로운 렌더링을 작성한 경우 수평선이 vsync라고 가정하면 (이 줄이 어디에서 문서화되어 있는지 알 수 있습니까?) Devtools가 keydown 이벤트는 keydown에서 DOM 변이가 끝난 직후의 첫 번째 회색 선 바로 다음까지의 시간을 측정하므로 측정하려는 항목에 대한 좋은 근사치입니다.

나는 자바 스크립트에서 requestAnimationFrame, requestIdleCallback, 메시지 전달을 통한 setImmediate polyfill 및 위의 몇 가지 조합을 사용하여이 시간을 대략적으로 계산하는 다양한 방법을 시도했다. 모두가 순수한 자바 스크립트 시간보다 길어진 것처럼 보이지만 대부분 화면을 실제로 업데이트 할 시간을 과소 평가하거나 과대 평가합니다.

누구든지 프로덕션에서이 시간을 측정하는 더 좋은 방법을 알고 있습니까? Chrome DevTools 측정 항목은 어떻게 작동합니까? 전 완전히 다른 것을 측정해야합니까?

Answer 1

이 입력 대기 이벤트의 계측은 매우 세련되고 멋지다. 이것들은 훌륭한 질문입니다.

입력 대기 이벤트는 트리거 작업은 화면 갱신을 요구 무효화가 발생한다고 가정

입력 대기 시간 이벤트가 VSYNC 주위에 종료 시간을 종료합니다. 이것이 바로 스크린 샷에서 Key Down이 Key Up보다 훨씬 더 확장 된 이유입니다. 그것은 확실히 가능

을 (keyup 청취자가 있었다하더라도, 그들은 스타일/레이아웃을 무효로하지 않았다) 이러한 일들이 정말하지 않은,에 종료하는 것이 이전 페인트 & VSYNC가있는 경우에 대한 응답으로 화면 업데이트 입력 ... 그러나 당신은 당신 자신의 전화를해야합니다.

그레이 라인, VSYNC, 스왑 버퍼

회색 점선 프레임 경계이다 점선하지만, 여기에 까다로운 시작합니다. 크롬 (및 AFAIK, 다른 브라우저도)에는 메인 스레드 프레임과 컴포 지터 스레드 프레임이 있습니다. DevTools는 프레임을 단일 타임 라인으로 표시하여 작업을 단순하게 유지하기 때문에 완벽하지는 않습니다. 귀하의 목적을 위해, 나는 그 Frames 트랙에있는 스크린 샷의 오른쪽 가장자리를 볼 것입니다. 오른쪽 가장자리는 화면이 그 내용으로 업데이트 된 곳입니다. Chrome에서는이 시간을 swapBuffers이라고 부릅니다. 당신은 풀 수있는 완벽한 도구가없는,

불행하게도 자바 스크립트에서이 측정

(모니터가 약간 다릅니다, "나는 새로운 프레임에 대한 준비가"말할 때 VSYNC는 기술적으로) 이거. 오래된 기법은 double-rAF이며 때로는 시간을 뺍니다. 이 시점에서 새로운 프레임이 하나 있다는 것을 확실히 알고 있습니다.this knowledge 중 일부를 적용하면 꽤 똑똑 할 수 있습니다. 그러나 그것은 완벽하지 않을 것입니다. 예를 들어, 긴 이미지 디코드는 프레임을 보낼 때 컴포 지터를 지연 시키지만 주 스레드는 유휴 상태이고 VSYNC는 새로운 프레임을 시작하게합니다 (따라서 rAF를 다시 호출합니다).

Long Task API는 주 스레드에서 어떤 종류의 작업을 수행하는지 설명하므로 도움이 될 수 있습니다. 그러나 나는 이러한 질문에 답하는 데 필요한 정밀도를 가지지 못할 것이라고 생각합니다. Frame Timing은 가지고 있었지만 개인 정보 보호의 이유로 사망했습니다.

상하 좌우 :

사용 timestamp from the input event, 입력이 컴포 지터에서 수신되었을 때를 촬영하고있다. 그리고 프레임을 출하 할 때 대략적인 시간을 빼고 몇 가지 단일 rAF, 이중 rAF 메커니즘을 사용하십시오. 그리고 당신이 행복 할 때가 있습니다. 내가 관심.