각도 JS 스케일링과 퍼포먼스

각도 JS 스케일링과 퍼포먼스

은행을 위해 만들고 있는 Angular 앱에 대해 성능 문제에 대해 머리를 싸매고 있습니다.

유감스럽게도 코드 일부를 보여주는 것은 계약 위반입니다.어쨌든, 현재 진행되고 있는 몇 가지 주요 문제에 대해 설명할 수 있으며, 베스트 프랙티스를 추천할 수 있기를 바랍니다.

응용 프로그램 구조:

• 기본적으로, 거대한 다중 양식 페이지입니다.
• 각 형식은 자체 부분이며 네스트된 컨트롤러와 부분 깊이는 약 3단계입니다.
• json 객체 컬렉션에 대해 동일한 형식이 ng-repeat됩니다.
• 각 양식은 반복되는 개체/모델에 바인딩됩니다.
• 페이지 상의 1에서 200까지의 폼을 지원합니다.

연대표를 보시면요.jQuery parse html 메서드, jQuery recalculate stye 메서드, GC Event(Garbage Collection)에 많은 시간을 할애하고 있습니다.이런 것들을 최소화하면 일이 좀 더 빨라질 거라고 생각합니다.이들은 모두 각도 라이프사이클의 일부이지만 이를 피할 수 있는 더 나은 방법이 있을 수 있습니다.프로파일러의 스크린샷을 다음에 나타냅니다.

결국 반복 폼 수가 5개를 넘어서면서 앱이 지지부진합니다.각 형태는 다른 형태와 상대적으로 관련이 없습니다.양식 간의 공유 속성을 관찰하지 않으려고 노력했습니다.

각도 성능 문제를 억제하려면 사용자 지정 지시문을 생성해야 합니다.엠버와는 달리 앵글은 모든 벨과 휘파람을 켜고 음을 낮추는 것은 당신에게 달려 있습니다.여기 당신을 돕기 위해 만든 몇 가지 지침이 있습니다.앱의 모든 데이터가 양방향으로 바인딩되어 있을 필요는 없으며, 그 결과 필요한 경우 페이지에서 워치 표현을 생략함으로써 귀중한 CPU 전력을 절약할 수 있습니다.이러한 모든 지시사항은 데이터를 한 번 바인드하고 그대로 둡니다.

https://gist.github.com/btm1/6802599

https://gist.github.com/btm1/6802312

https://gist.github.com/btm1/6746150

위의 답변 중 하나는 ng-repeat이 큰 퍼포먼스 히트를 갖는 것에 대해 언급하고 있기 때문에 "set-repeat"을 일회성 데이터 바인딩 반복 지시어로 제공합니다.

고객님의 문제에 대한 자세한 정보가 없으면 해결책을 제시하기 어렵지만, 저는 최근에 $digest 사이클과는 무관한, 귀하가 본 것과 유사한 성능 문제를 경험(및 해결)했습니다.

misko의 우수한 투고를 포함한 angularjs 퍼포먼스에 대한 대부분의 논의는 더티 체크 퍼포먼스와 $digest 사이클에 관한 것입니다.그러나 angularjs에서 발생할 수 있는 성능 문제는 이것뿐만이 아닙니다.첫 번째 단계는 다이제스트 사이클이 사용자의 문제인지 여부를 확인하는 것입니다.이를 위해 batarang을 사용할 수도 있고, 앱만 보고 정확히 언제 느려질지 볼 수도 있습니다.다이제스트 사이클이 늦어지면 기본적으로 UI와의 상호작용이 느려집니다.

OTOH에서는 다이제스트 사이클이 빠른 앱을 사용할 수 있습니다.이는 표시할 컴포넌트 세트를 로드, 전환 또는 변경할 때만 느려집니다.이는 HTML 및 가비지 수집을 해석하는 데 많은 시간이 소요되므로 프로파일링에서 확인할 수 있습니다.제 경우, 이 문제는 ng-repeat, ng-switch, ng-iffy where에 의존하지 않고 표시할 html 템플릿의 사전 계산을 통해 해결되었습니다.

위젯 유형에 대한 ng-switch가 포함된 ng-switch="widgets"를 사용하여 임의의 위젯 세트(커스텀 자체 포함 지침)를 표시했습니다.이를 특정 위젯 세트에 대한 각도 템플릿을 생성하는 코드로 대체하면 루트 전환 속도가 최대 10초에서 실질적으로 즉시로 빨라졌습니다.

위의 구글 그룹 스레드를 통해 특정 문제를 해결한 방법에 대한 자세한 정보를 볼 수 있으며, 특정 제안을 원하시면 귀하의 애플리케이션에 대한 자세한 정보를 제공할 수 있습니다.

생산 시 성능을 향상시키려면 아래의 매우 멋진 원라이너를 읽으십시오.

각도 견적JS 매뉴얼:

디폴트로는 각도JS는 바인딩 및 스코프에 대한 정보를 DOM 노드에 부가하고 데이터 바인딩 요소에 CSS 클래스를 추가합니다.

ngBind, ngBindHtml 또는 {{...}} 보간, 바인딩 데이터 및 CSS 클래스 ng-binding이 해당 요소에 부착되어 있습니다.

컴파일러가 새로운 스코프를 작성한 경우 스코프와 ng-scope 또는 ng-solated-scope CSS 클래스가 대응하는 요소에 부가됩니다.그런 다음 element.scope() 및 element.isolateScope()를 통해 이러한 스코프 참조에 액세스할 수 있습니다.

Protractor 및 Batarang과 같은 도구를 실행하려면 이 정보가 필요하지만 프로덕션에서 이 정보를 사용하지 않도록 설정하면 다음과 같은 기능을 통해 성능이 크게 향상됩니다.

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

자세한 내용은 이쪽에서 확인하실 수 있습니다.

일반적으로 각도2000개 이상의 데이터 바인딩이 활성화되어 있는 경우(즉, 각 $digest-cycle마다 더티 체크되는 범위 내의 2000개 항목) JS는 성능이 저하됩니다.이로 인해 Ng-repeat는 성능에 큰 영향을 미칩니다.반복되는 각 항목은 항목 내에서 사용되는 추가 데이터나 지시사항을 카운트하지 않고 적어도2개의 바인딩을 설정합니다.

Angular의 개발자 중 한 명JS는 이 SO 답변에서 더티 체크의 세부사항과 그 성능에 대한 훌륭한 설명을 제공합니다.

https://stackoverflow.com/a/9693933/179024

아래의 코멘트 스레드는 읽을 만한 가치가 있으며, 같은 페이지의 아래쪽에 있는 답변에서도 이에 대한 생각을 공유합니다.

https://stackoverflow.com/a/18381836/179024

아직 코멘트를 할 수 있는 포인트가 부족해서 '답변'으로 표현해서 죄송합니다.

Angular에 비슷한 문제가 발생했습니다.JS 앱. 'batarang'을 사용하면 다수의 스코프 오브젝트를 처리해야 하며, 관련 $watch 표현은 성능 문제를 일으킵니다.이로 인해 다른 프레임워크나 React와 같은 것이 있는지 궁금하게 되었습니다.대신 JS를 사용하여 '보기' 부분을 처리해야 합니다.

다음을 피하려고 하다

1. 한번에 50개 이상의 요소가 목록에 있는 경우 ng-watch 사용을 피하고 수동 감시를 피하십시오.

2. 꼭 필요할 때까지 ng-click, ng-inter, ng-interleave 등의 마우스 이벤트를 맹목적으로 사용하지 마십시오.js의 이벤트 전파 개념과 함께 $event 개체를 사용하여 마우스 수를 줄이십시오.

3. 가능한 한 사용 범위를 지정합니다.범위 대신 $140.$watch. 이렇게 하면 다이제스트 사이클이 하위 범위에서만 실행됩니다.

   4. 1개의 부모 컨트롤러 내에1개 또는 2개의 컨트롤러가 네스트 되어 재사용 가능한 로직을 부모에 보관해 보겠습니다.Ui-router를 사용하는 동안(페이지를 갱신하지 않고 URL을 변경해야 하는 요건을 충족하기 위해) 네스트된 상태에서 이 로직을 사용했습니다.

   가장 중요하다!HTML에서 모든 필터 제거!

위의 모든 것이 애플리케이션의 모든 스코프에서 다이제스트 사이클을 트리거하므로 뷰가 각도로 렌더링된 경우에도 다시 가차없는 다이제스트 루프를 실행할 가능성이 높습니다.

DOM 조작을 커스텀 디렉티브로 이행하는 것과 많은 $watch의 $watch 문제 사이의 중간 근거는 "bind-once" 의미론을 사용하는 것입니다.

이 기능은 데이터를 사용할 수 있게 되면 데이터를 변경할 수 없는 경우에 적합합니다.'bindonce' 참조

이것은 링크일 뿐입니다!이것은 제가 이 글을 읽을 때 떠올린 아이디어일 뿐, 아직 탐구해 본 적은 없지만 누군가가 했을 가능성이 높기 때문에 제 아이디어에 대한 답변을 기다리고 있습니다.공유 웹 워커를 사용하여 UI 스레드에서 대량의 처리량을 얻는 것은 어떻습니까?https://github.com/h2non/sharedworkers-angular-poc

내가 생각한 다른 생각은 더 단순한 것이었다.앱이 무한 스크롤의 이점을 얻을 수 있습니까?제 말은, 이 양식들은 모두 화면에 맞지 않고, 서로 연결되어 있지 않기 때문에, 필요에 따라서 그리는 것은 어떨까요?메모리에 로드한 후 적절히 그립니다.

다른 성능 최적화와 마찬가지로 애플리케이션을 프로파일링하여 진정한 병목 현상을 찾는 방법을 아는 것이 중요합니다.그러면 하나씩 풀 수 있어요.저는 보통 다음과 같은 순서로 병목 현상과 싸웁니다.

• 내 자바스크립트 코드
• 각 아이돌 다이제스트 사이클에서 실행되는 각도 표현식(복잡한 감시자 및 필터)
• 각도 구성(ng-module, 다이제스트 사이클용 객체 복사)

각 단계에서 병목 현상을 식별하는 방법을 보여 주는 각진 사례를 하나씩 프로파일링했습니다.http://bahmutov.calepin.co/improving-angular-web-app-performance-example.html

언급URL : https://stackoverflow.com/questions/17656397/angular-js-scaling-performance