답변:
여기에 비밀이 있습니다. 크롬 개발 도구에서 cpu 프로필 실행을 수행합니다. 캡처를 중지하면 화면 하단에 "Heavy (Bottom Up)"옆에 아래쪽 삼각형이 있습니다. 삼각형을 클릭하고 "불꽃 차트"를 선택하십시오. Flame Chart 모드에 있으면 확대 / 축소 및 이동하여 다이제스트주기, 소요 시간 및 정확히 어떤 함수가 호출되는지 확인할 수 있습니다. Flame Chart는 페이지로드 문제, ng-repeat 성능 문제, 다이제스트주기 문제를 추적하는 데 매우 유용합니다! Flame Chart 이전에 어떻게 디버깅하고 프로파일 링 할 수 있었는지 정말 모르겠습니다. 예를 들면 다음과 같습니다.
다음 답변은 $ digest 루프 의 유휴 성능, 즉 시계 표현식이 변경되지 않을 때의 다이제스트 성능을 알려줍니다. 보기가 변경되지 않는 경우에도 애플리케이션이 느리게 보이는 경우 유용합니다. 더 복잡한 상황은 aet의 답변을 참조하십시오.
콘솔에 다음을 입력하십시오.
angular.element(document).injector().invoke(function($rootScope) {
var a = performance.now();
$rootScope.$apply();
console.log(performance.now()-a);
})
결과는 다이제스트주기의 기간을 밀리 초 단위로 제공합니다. 숫자가 작을수록 좋습니다.
노트:
Domi는 주석에서 다음과 같이 언급했습니다 . 초기화를
angular.element(document)위해ng-app지시문을 사용하면 많은 결과를 얻지 못합니다 . 이 경우ng-app대신 요소를 가져 오십시오 . 예를 들어angular.element('#ng-app')
다음을 시도 할 수도 있습니다.
angular.element(document.querySelector('[ng-app]')).injector().invoke(function($rootScope) {
var a = performance.now();
$rootScope.$apply();
console.log(performance.now()-a);
})
The listener is called only when the value from the current watchExpression and the previous call to watchExpression are not equal. 코드는 리스너를 고려하지 않습니다. 그리고 각도는 많은 청취자를 만듭니다. $apply()아무것도 변경 되지 않았을 때 전화를 걸지 않기 때문에 결과는 이야기의 절반에 불과합니다. ) 상황에 따라이 덜 흥미로운 일이 될 수 있습니다
angular.element(document)ng-app초기화를 위해 지시문을 사용하면 많은 것을 얻지 못합니다 . 이 경우 ng-app대신 요소를 가져 오십시오 . 예를 들어 angular.element('#ng-app')...
다음은 다이제스트 프로파일 링에 도움이되는 새로운 도구입니다. Digest-HUD
각도 성능을 사용할 수도 있습니다.
이 확장은 감시자 수, 다이제스트 타이밍 및 다이제스트 속도에 대한 실시간 모니터링 차트를 제공합니다. 또한 다이제스트 타이밍 분포를 가져 와서 더 많은 재귀 패턴에서 예외적으로 긴 다이제스트 타이밍을 확인할 수 있으며 모든 실시간 데이터가 이벤트에 연결되어 어떤 작업이 애플리케이션 성능을 변경했는지 확인할 수 있습니다. 마지막으로 서비스 메서드의 시간을 측정하고 실행 횟수를 계산하여 앱의 실행 시간에 더 많은 영향을 미치는 서비스를 결정할 수 있습니다.
Disclamer : 나는 확장의 저자입니다.
다이제스트주기에 눈을 유지하기위한 하나의 편리한 도구는 우수한 통해 찾을 수 있습니다 NG-통계 툴 에 의해 @kentcdodds . 이와 같이 약간의 시각적 요소를 생성하고 북마크릿을 통해 구현할 수도 있습니다. jsfiddle과 같은 iFrame 내부에서도 사용할 수 있습니다.
페이지의 각도 다이제스트 / 시계에 대한 통계를 표시하는 유틸리티가 거의 없습니다. 이 라이브러리에는 현재 차트를 생성하는 간단한 스크립트가 있습니다 (아래 참조). 또한 지정한 페이지의 특정 위치에 각도 통계를 배치하는 데 사용할 수있는
angularStats라는 지시문이있는 라는 모듈을 생성합니다angular-stats.
UX 프로파일 러를 사용할 수 있습니다.
위에서 설명한 도구는 다이제스트 루프의 성능을 측정하는 아이디어를 이미 제공했습니다. 다이제스트 사이클의 성능을 높이기위한 가장 중요한 포인트는 다음과 같습니다.
스크롤 이벤트를 자세히 모니터링하여 보이지 않는 모든 요소를 숨기고
관찰자 수를 크게 줄입니다.
다른 모든 이벤트에 대해 관리 가능한 $ digest주기를 갖습니다.