NG를 온라인으로 최적화하는 방법에는 여러 가지가 있습니다. 핵심은 모두 $$ 감시자 범위의 내부 속성에 관한 것입니다. 오늘 나는 다른 것에 대해 이야기 할 것입니다. 이것은 NG의 결함이기 때문에 본질은 변하지 않습니다. 그러나 적절한 방법을 사용하는 한 이러한 문제는 여전히 피할 수 있다고 생각합니다.
소개
AngularJS는 Google에서 제작 한 MVVM 프레임 워크 인 NG로 약칭됩니다. 이는 프론트 엔드 프로젝트의 개발 효율성을 향상시킵니다 (실제로 개발 효율성을 향상시킬 수 있음). 컨트롤러, 지침 및 서비스를 사용하여 전체 프로젝트를 중심으로 회전하고 고유 한 DI를 사용하여 세 번째 계층의 호출 문제를 해결합니다. 자세한 내용은 이전에 작성한 NG 소스 코드 분석을 참조하십시오.
NG의 단단한 상처
결함과 관련하여 먼저 간단한 데이터 바인딩 원리에 대해 이야기해야합니다.
NG의 각 페이지에 정의 된 모델은 실제로 현재 범위에 리스너를 추가합니다. 내부 컨테이너는 $$ Wachers 어레이입니다. 페이지의 모든 모델이 변경되는 한 범위 내부의 $ 다이제스트 방법이 트리거됩니다. 현재 스코프 트리의 모든 모델을 검색하여 페이지의 모델이 데이터 동기화를 얻을 수 있으므로 시간이 많이 걸립니다. 공식 진술은 2,000 명의 청취자가 페이지에 나타나면 페이지 성능이 크게 떨어질 것입니다. 따라서 NG의 성능을 향상 시키려면이 측면에서 시작해야합니다.
팁 1 : 일회성 바인딩
사실, 다른 사람이 이미 온라인에서 이것을 말했습니다. 다음은 새로운 사용법입니다. NG의 1.3.0+ 버전은 이미 모델이 한 번만 바인딩되는 상황을 지원하기 위해 내장 구문을 제공했습니다. 다음 예를 참조하십시오.
오래된 코드
코드 사본은 다음과 같습니다.
안녕하세요
새 코드
코드 사본은 다음과 같습니다.
안녕하세요
새로운 구문은 모델 앞에서 다음을 추가하는 것임을 알 수 있습니다. 이 구문은 온라인으로 사용되는 타사 플러그인보다 훨씬 편리하다고 생각합니다.
코드 사본은 다음과 같습니다.
TIP2 : $ SCOPE. $ 다이제스트 대 $ SCOPE. $ 적용
많은 사람들이 $ Apply 방법에 익숙하다고 생각합니다. NG 환경에서 코드를 실행할 때 일반적으로 사용됩니다. 페이지의 데이터 동기화를 보장하기 위해 코드 실행 후 $ 적용 메소드를 호출하면 내부 $ 다이제스트가 트리거되어 모든 모델을 범위에서 확인합니다. 실제로, 이것은 내부에서 호출되며 일부 코드 스 니펫 만 아래에 기록됩니다.
코드 사본은 다음과 같습니다.
...
...
$ rootscope. $ 다이제스트
...
...
그들 모두는 실제로 $ rootscope의 루트 범위에서 $ 다이제스트를 호출하고 있습니다. 그렇다면 다른 스코프에서 $ 다이제스트의 차이점은 무엇입니까? 실제로 가장 중요한 차이점은 그 것입니다
코드 사본은 다음과 같습니다.
$ 다이제스트는 발신자 아래의 모든 모델을 깊이 검색합니다
따라서 $ SCOPE, $ ROTSCOPE와 비교하여 모델을 찾는 데 많은 시간이 절약됩니다.
그러나 페이지의 모든 모델 데이터의 동기화를 확인하려면 $ RootScope를 호출해야하므로 코드를 작성하기 전에 동기화 해야하는 데이터에 대해 생각하는 것이 가장 좋습니다.
TIP3 : NG-Repeat를 가능한 한 적게 호출하십시오
NG-REPEAT는 기본적으로 많은 리스너를 생성하므로 데이터 볼륨이 크면 페이지 성능을 소비합니다. NG-Repeat는 데이터 목록을 자주 업데이트해야 할 때만 필요하다고 생각합니다. 그렇지 않으면 많은 청취자를 거기에 넣는 폐기물 일 것입니다. 현재 NG의 자체 $ interpolate 서비스를 사용하여 정적 템플릿 엔진과 유사한 코드 스 니펫을 구문 분석하여 NG의 핵심 구문 분석 서비스 $ 구문 분석에 주로 의존 한 다음 데이터를 일회성 모델로 작성한 후 이러한 코드 스 니펫을 직접 할당 할 수 있습니다.
TIP4 : 명령에 기본 구문을 작성하십시오
NG는 NG-SHOW 및 NG-HIDE와 같은 많은 지침을 제공하지만 기능은 모델의 True와 False를 기반으로 코드 스 니펫을 표시하거나 숨기는 것입니다. 비즈니스 요구 사항을 빠르게 구현할 수는 있지만 이러한 지침은 여전히 기본적으로 청취자를 추가합니다. 이러한 코드 스 니펫이 큰 명령어로 존재하는 경우, 더 좋은 방법은 명령어 링크에 .show () 및 .hide ()와 같은 유사한 JQ 메소드를 작성하여 청취자 수와 유사한 이벤트 지침을 저장할 수 있습니다. 이들은 실제로 addeventListener를 사용하여 주변 지침에서 이벤트를 바인딩 할 수 있습니다. 어쨌든 코드를 작성하기 전에 리스너 수를 최소화하는 방법에 대해 생각하는 것이 가장 좋습니다. 따라서 페이지 성능을 포괄적으로 개선 할 수 있습니다.
TIP5 : 페이지에서 가능한 한 적은 필터를 사용하십시오.
페이지에서 모델 뒤에 필터를 추가 할 때 현재 모델이 $ 다이제스트에서 두 번 실행되므로 불필요한 성능 폐기물이 발생합니다. 처음으로 $$ 감시자 감지 작업이 변경되는 경우입니다. 두 번째는 모델 값이 수정 될 때 발생하므로 가능한 한 적은 인라인시 필터 구문을 사용해보십시오. 다음과 같은 것은 페이지의 성능에 큰 영향을 미칩니다.
$ 필터 서비스를 사용하여 백그라운드에서 필터 기능을 호출하는 것이 좋습니다. 이는 페이지 성능을 크게 향상시킬 수 있습니다. 코드는 다음과 같습니다
코드 사본은 다음과 같습니다.
$ 필터 ( '필터') (배열, 표현, 비교기);
요약
위의 것은 NG 프로젝트의 성능을 향상시키기위한 몇 가지 팁입니다. NG는 매우 강력하지만 불규칙한 코드도 성능을 파괴 할 것입니다. 따라서 코드를 작성하기 전에 청취자가 필요하지 않은 곳에 대해 생각하는 것이 가장 좋습니다.