Anglejs_AngularJS에 대한 몇 가지 최적화 팁

인터넷에서 ng를 최적화하는 방법은 이미 많이 있습니다. 핵심은 $$watchers 범위의 내부 속성에서 시작됩니다. 오늘은 다른 부분에 대해 이야기하겠습니다. 왜냐하면 그것은 어려운 부분이기 때문입니다. ng. 부상이 발생하지만 적절한 기술을 사용하는 한 이러한 문제는 피할 수 있다고 믿습니다.

소개

ng라고도 불리는 angularjs는 Google에서 제작한 mvvm 프레임워크입니다. 이는 프런트엔드 프로젝트의 개발 효율성을 향상시킵니다(실제로는 전체 프로젝트를 컨트롤러, 지침, 및 서비스를 제공하며, 세 번째 레이어 이전에 호출 문제를 해결하기 위해 고유한 내부 DI를 사용합니다. 자세한 내용은 이전에 작성한 ng 소스 코드 분석을 참조하세요.

ng의 단점

결점에 관해서는 먼저 간단한 데이터 바인딩 원리에 대해 이야기하겠습니다

ng의 각 페이지에 정의된 각 모델은 실제로 현재 범위에 리스너를 추가합니다. 내부 컨테이너는 페이지의 모델이 변경되는 한 범위 내의 $digest 메서드입니다. 트리거되면 페이지의 모델이 데이터 동기화를 얻을 수 있는지 확인하기 위해 현재 범위 트리의 모든 모델을 검색하므로 이는 페이지에 2000명의 리스너가 나타날 때 매우 시간이 많이 걸립니다. 페이지 성능이 크게 떨어지게 되므로 ng의 성능을 향상시키기 위해서는 이 부분부터 시작해야 합니다.

tip1: 한 번만 바인딩

사실 다른 사람들이 이미 온라인에서 이 말을 했습니다. 여기서는 새로운 사용법에 대해 이야기하겠습니다. ng의 1.3.0 버전에는 모델이 한 번만 바인딩되는 상황을 지원하는 구문이 내장되어 있습니다. :

오래된 코드

코드 복사 코드는 다음과 같습니다.

안녕하세요

새로운 코드

코드 복사 코드는 다음과 같습니다.

안녕하세요

모델 앞에 ::을 추가하는 것이 새로운 구문임을 알 수 있습니다. 온라인에서 사용하는 타사 플러그인보다 이 구문이 훨씬 편리하다고 생각합니다.

코드 복사 코드는 다음과 같습니다.

팁2: $scope.$digest 대 $scope.$apply

$apply 메소드는 많은 분들이 잘 알고 계시리라 생각합니다. 일반적으로 ng 환경에서 코드가 실행되지 않을 때 사용하는데, 페이지의 데이터 동기화를 보장하기 위해 코드 실행이 완료된 후 $apply 메소드를 호출하게 됩니다. 효과를 확인하기 위해 내부 $digest를 트리거합니다. 실제로는 내부적으로 일부 코드 조각만 호출됩니다.

코드 복사 코드는 다음과 같습니다.

...
...
$rootScope.$digest
...
...

실제로 수행하는 작업은 $rootScope의 루트 범위에서 $digest를 호출하는 것뿐입니다. 그렇다면 다른 범위에서 $digest의 차이점은 무엇입니까? 실제로 가장 중요한 차이점은

입니다.

코드 복사 코드는 다음과 같습니다.

$digest는 호출자 아래의 모든 모델만 심층 검색합니다


따라서 $scope는 $rootScope에 비해 모델 검색 시간을 많이 절약합니다.

그러나 페이지에 있는 모든 모델 데이터의 동기화를 보장하려면 여전히 $rootScope를 호출해야 하므로 코드를 작성하기 전에 어떤 데이터를 동기적으로 변경해야 하는지 생각해 보는 것이 가장 좋습니다.

tip3: ng-repeat를 최대한 적게 호출하세요

ng-repeat는 기본적으로 많은 리스너를 생성하므로 데이터 양이 많을 경우 페이지 성능을 소모하므로 데이터 목록을 자주 업데이트해야 하는 경우에만 ng-repeat를 사용하면 될 것 같습니다. 너무 많은 리스너를 배치하는 것도 낭비입니다. 이때 ng와 함께 제공되는 $interpolate 서비스를 사용하여 내부가 주로 ng 코어에 의존하는 코드 조각을 구문 분석할 수 있습니다. 파싱 ​​서비스 $parse, 그리고 데이터를 채운 후 코드 조각을 일회성 모델에 직접 할당할 수 있습니다

.

tip4: 명령에 네이티브 구문을 작성해보세요

ng는 ng-show 및 ng-hide와 같은 많은 명령을 제공하지만 해당 기능은 모델의 참 또는 거짓에 따라 코드 조각을 표시하거나 숨기는 것입니다. 비즈니스 요구 사항을 빠르게 실현할 수 있지만 이러한 명령은 기본적으로 리스너가 추가됩니다. 이러한 코드 조각이 큰 명령에 존재하는 경우 더 좋은 방법은 명령 링크에 .show(), .hide() 및 기타 유사한 jq 메서드를 작성하여 이를 제어하는 ​​것입니다. 리스너 수를 저장합니다. 내장 이벤트 명령어와 유사하게 주변 명령어에서 addEventListener를 사용하여 실제로 이벤트에 바인딩할 수 있습니다. 어쨌든 코드를 작성하기 전에 리스너 수를 늘리는 방법을 생각해 보는 것이 가장 좋습니다. 적어도 이는 페이지 성능을 전반적으로 향상시킬 수 있습니다.

팁5: 페이지에서 가능한 한 적은 수의 필터를 사용하세요

페이지에서 모델 뒤에 필터를 추가하면 $digest에서 현재 모델이 두 번 실행되어 $$watchers가 두 번째로 작업 변경을 감지할 때 불필요한 성능 낭비가 발생합니다. 모델 값을 수정할 때 인라인 필터 구문을 가능한 한 적게 사용하십시오. 다음은 페이지 성능에 큰 영향을 미치기 때문입니다

$filter 서비스를 사용하여 백그라운드에서 필터 기능을 호출하는 것이 좋습니다. 이는 페이지 성능을 크게 향상시킬 수 있는 코드입니다

코드 복사 코드는 다음과 같습니다.

$filter('filter')(배열, 표현식, 비교기);

요약

위 내용은 ng 프로젝트의 성능을 향상시키는 몇 가지 팁입니다. ng는 매우 강력하지만 비표준 코드도 성능을 저하시키므로 코드를 작성하기 전에 리스너가 필요하지 않은 부분을 생각해 보는 것이 가장 좋습니다. .