Chrome DevTools 프레임 이벤트 타이밍

Chrome을 사용하여 앱의 애니메이션에서 병 목을 분리합니다.Chrome DevTools 프레임 이벤트 타이밍

프레임이 약 20 + ms 정도 걸리며 너무 느립니다. 그러나 프레임을 확장하여 무슨 일이 일어나고 있는지 알기 때문에 jQuery 호출에 20 + ms가 걸리는 것으로 나타 났지만 실제 재 계산 스타일 이벤트는 5ms를 약간 넘습니다.

지연을 유발하는 원인을 어떻게 알 수 있습니까? 나는 다른 15ms의가 무엇인지 볼 수 없습니다

총 이벤트 시간 :

Chrome DevTools showing total time of jQuery function call

JQuery와 함수 내에서 "새로 고침 스타일"이벤트

Chrome DevTools showing split of timing for Recalculate Style event

스택 "전 스타일 재 계산 "

Chrome DevTools showing stack for Recalculate Style event

출처

2013-12-09 Willshaw Media

합계 22.93ms를 구성하는 다른 중첩 된 이벤트는 스타일 재 계산 이벤트 바로 뒤에 나열되어야합니다. 예를 들어 아래에서 총 9ms의 함수 호출이 있음을 알 수 있습니다. 자주색 숫자는 렌더링 시간을 나타내고 노란색 숫자는 스크립팅 시간을 나타냅니다. 당신이 팝업을 기각하는 경우

Parent event

, 당신은 구성하는 모든 이벤트가 호출이 그 아래에 자세히 설명되어 있음을 볼 수 있습니다.

nested events

출처

2013-12-10 20:01:53

미안하지만 귀하의 답변에 댓글을 달았습니다. 확장 된 이벤트를 보여주기 위해 스크린 샷을 추가했으며 함수 호출이 측면에 표시된 유일한 것은 재 계산 스타일 이벤트 –

입니다. 첫 번째 스크린 샷을 언급하고 있습니까? 그럴 경우 더 자세한 정보가 없습니다. 문제의 코드는 5 행의 jquery-2.0.3-min.js입니다. 그러나이 코드는별로 도움이되지 않는 축소 된 버전입니다. 디버깅을 쉽게하기 위해 개발 중에 비 압축 버전으로 전환 할 수 있습니다. –

아, 좋은 지적입니다. 도움이 될지도 몰라. jQuery 함수 호출 자체가 그렇게 오래 걸릴 수 있습니까? 나는 압축되지 않은 버전을 사용하여 그 기능이 무엇인지 확인합니다. –

Chrome DevTools 프레임 이벤트 타이밍

답변

관련 문제