AngularJS => 성능 프로파일 링

프로파일 링에 관한 모든 것

프로파일 링이란 무엇입니까?

정의에 따라 프로파일 링 은 프로그램의 공간 (메모리) 또는 시간 복잡성, 특정 명령어의 사용법, 함수 호출의 빈도 및 기간 등을 측정하는 동적 프로그램 분석의 한 형태입니다.

필요한 이유는 무엇입니까?

프로파일 링은 프로그램이 대부분의 시간을 보내고 있다는 것을 알 때까지 효과적으로 최적화 할 수 없으므로 중요합니다. 프로그램 실행 시간 (프로파일 링)을 측정하지 않고 실제로 개선했는지 여부는 알 수 없습니다.

도구 및 기술 :

Chrome의 내장 된 개발 도구
여기에는 프로파일 링에 사용할 포괄적 인 도구 세트가 포함됩니다. 자바 스크립트 파일, CSS 파일, 애니메이션, CPU 사용량, 메모리 누수, 네트워크, 보안 등에서 병목 현상을 찾아내는 데 심혈을 기울일 수 있습니다.
타임 라인 기록을 만들고 의심스러운 긴 평가 스크립트 이벤트를 찾으십시오. 어떤 것이 발견되면 JS 프로파일 러를 활성화하고 기록을 다시 수행하여 호출 된 JS 기능과 각 호출 시간에 대한 자세한 정보를 얻을 수 있습니다. 더 읽기 ...

FireBug (Firefox와 함께 사용)

Dynatrace (IE와 함께 사용)

Batarang (Chrome에서 사용)
구식 크롬 브라우저 용 애드온으로 안정적이지만 각도 애플리케이션의 모델, 성능, 종속성을 모니터링하는 데 사용할 수 있습니다. 그것은 소규모 응용 프로그램에 잘 작동하고 범위 변수가 다양한 수준에서 보유하고있는 것에 대한 통찰력을 줄 수 있습니다. 활동적인 관찰자, 표현식보기, 앱의 콜렉션보기.

감시자 (Chrome에서 사용)
멋지고 단순한 UI로 각도 앱의 시청자 수를 세는 것.

다음 코드를 사용하여 각 앱의 수를 수동으로 확인합니다 ( @Words와 같은 수의 관측자에 대한 크레디트)

(function() {
    var root = angular.element(document.getElementsByTagName('body')),
        watchers = [],
        f = function(element) {
        angular.forEach(['$scope', '$isolateScope'], function(scopeProperty) {
            if(element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function(watcher) {
                watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function(childElement) {
            f(angular.element(childElement));
        });
    };
 
    f(root);
 
    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
            watchersWithoutDuplicates.push(item);
        }
    });
    console.log(watchersWithoutDuplicates.length);
})();

다양한 온라인 도구 / 웹 사이트를 통해 다양한 기능을 활용하여 응용 프로그램의 프로필을 쉽게 만들 수 있습니다.
그러한 사이트 중 하나는 다음과 같습니다. https://www.webpagetest.org/
이를 통해 실제 브라우저 (IE 및 Chrome)와 실제 소비자 연결 속도를 사용하여 전세계 여러 곳에서 무료 웹 사이트 속도 테스트를 실행할 수 있습니다. 간단한 테스트를 실행하거나 다단계 트랜잭션, 비디오 캡쳐, 컨텐츠 차단 등의 고급 테스트를 수행 할 수 있습니다.

다음 단계:

프로파일 링을 완료했습니다. 그것은 당신을 도로의 아래 절반 방법을 가져온다. 바로 다음 작업은 결과를 작업 항목으로 바꾸어 응용 프로그램을 최적화하는 것입니다. 간단한 트릭으로 각 애플 리케이션의 성능을 향상시킬 수있는 방법에 대한 이 문서 를 참조하십시오 .

해피 코딩 :)

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

AngularJS
성능 프로파일 링

수색…

프로파일 링에 관한 모든 것