Angular 속도를 높이는 방법JS 어플리케이션?

Angular 속도를 높이는 방법JS 어플리케이션?

나는 Angular를 가지고 있다.페이지 그리드가 있는 JS 앱(2개의 중첩 ng-repeat).한 페이지에는 약 25x40의 입력 요소가 있습니다.1000개의 바인딩을 만든 초기에는 페이징 퍼포먼스가 양호했습니다.

하지만 페이지가 복잡해지면 동적 클래스, 다양한 컨텍스트 메뉴, 그리드의 각 셀에 대한 조건부 컨텐츠가 증가합니다.또한 약 6000개의 바인딩(입력 요소당 6개)으로 인해 페이징을 사용할 수 없게 되었습니다.

질문입니다. 일반적으로 AngularJS의 성능 문제에 어떻게 접근해야 합니까?명백한 첫 단계는 측정하는 것이다.하지만 Chrome Profiler의 결과를 보면 어떻게 진행해야 하는지 전혀 알 수 없습니다.

 Self      Total                           Function
-----------------------------------------------------------------
24 ms    2.79 s    angular.js:7997         Scope.$digest
 1 ms       1 ms   controllers.js:365      setViewportData
16 ms     692 ms   angular.js:13968        ngRepeatWatch
 8 ms      22 ms   angular.js:6439         extend.literal
 9 ms    1.22 s    angular.js:14268        ngSwitchWatchAction
16 ms      45 ms   angular.js:12436        ngModelWatch
 0        621 ms   angular-ui-4.0.js:264   initDateWidget
 0         13 ms   angular.js:12859        ngClassWatchAction
 0         70 ms   angular.js:14184        ngStyleWatchAction
 1 ms       5 ms   angular-ui-4.0.js:261   getOptions
 0         16 ms   angular.js:579          copy
 0          1 ms   angular.js:4558         interpolateFnWatchAction
 1 ms       2 ms   angular.js:5981         token.fn.extend.assign
 0         37 ms   angular.js:8151         Scope.$eval
 1 ms       1 ms   angular.js:6137         extend.constant
14 ms      16 ms   angular.js:651          equals
 1 ms       1 ms   angular.js:4939         $interpolate.fn

차치하고, 「Object.observe()」가 향후의 처리속도를 높일 가능성이 있습니까(「initDateWidget」를 무시한 것은 분명히 다른 토픽입니다).

Angular 앱의 속도를 최대한 높일 수 있는 것은 가능한 한 바인딩을 줄이는 것입니다.이를 위한 하나의 방법은 ng-repeats를 사용하는 것이 아니라 DOM 조작으로 테이블을 작성하는 것입니다.이렇게 하면 처리해야 하는 전체 시계 수가 줄어들어 $digesting 속도가 훨씬 빨라집니다.

그렇게 하는 것이 추하다는 것은 알지만 Angular는 3000개 이상의 바인딩을 설정할 수 있는 것이 아닙니다.다이제스트도 하고 옵저버 패턴도 아니기 때문에 셋업 속도가 그만큼 느려집니다.

하이브리드 어프로치를 실행할 수도 있습니다.ng-repeat을 계속 사용했지만 커스텀 디렉티브로부터의 직선적인 DOM 조작에 의해 모든 값이 DOM에 배치되어 바인딩이 회피됩니다.

아직 설치하지 않은 경우 Angular를 설치하십시오.JS Chrome 플러그인, Batarang: 어떤 바인딩이 당신을 슬프게 하는지 정확히 알아낼 수 있습니다.https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

다른 답변에서 알 수 있듯이, 사용자가 찾고 있는 것은 테이블에 대한 무한 스크롤 설정의 작은 케이스이며, 바인딩된 모델이 화면에 표시되는 서브셋입니다.

ng-grid 컴포넌트는 이를 구현하고 있으며 이를 직접 사용하거나 기술을 도용하는 것을 검토할 가치가 있습니다.http://angular-ui.github.com/ng-grid/

자원

이 게시물은 각도에 대한 것입니다.대규모 리스트의 JS 퍼포먼스에는 퍼포먼스 튜닝 옵션에 대한 개요가 기재되어 있습니다.

위의 답변(Batarang 플러그인 제외)도 에 기재되어 있습니다.이것은 그 기사의 힌트 개요에 불과합니다.

limitTo로 데이터 감소(패지화)

보다 명확한 해결책 중 하나는 뷰에 표시되는 항목의 수를 줄임으로써 바인딩의 양을 줄이는 것입니다.은 pag터음음음음음음음음음음음 the the the the the the the the pag로 할 수 .limitTo을 하다ng-repeat

대규모 데이터 세트(angular.js)에 비해 ngRepeat의 성능을 향상시키는 방법 예그 기사에는 jsbin 예도 링크되어 있습니다.

또한 인라인 방식은 $digest마다 평가되므로 데이터 제공에는 사용하지 마십시오.

<li ng-repeat="item in filteredItems()"> // Bad idea, since very often evaluated.
<li ng-repeat="item in items"> // Way to go! 

bindonce를 사용하여 바인딩 제거

또 하나의 명백한 해결책은 특정 요소의 바인딩을 제거하는 것입니다.물론 업데이트는 더 이상 보기에 반영되지 않습니다.

bindonce 솔루션은 단순히 양방향 바인딩을 제거하는 것 이상의 작업을 수행합니다.기본적으로 바인딩이 삭제되기 전에 값이 한 번 바인딩될 때까지 기다립니다.직접 읽어보세요.자세한 내용은 Bindonce 프로젝트를 확인하십시오.

맨 위에 나열된 기사에는 2개의 목록으로 작동하는 패턴에 대한 정보도 있습니다.하나는 시각화용이고 다른 하나는 데이터 소스로 사용됩니다.

ng-grid 사용

Ng-grid에는 현재 표시되는 요소만 렌더링할 수 있다는 장점이 있습니다.자세한 것은, http://angular-ui.github.io/ng-grid/ 를 참조해 주세요.

similar similar한 。ng-if는, DOM 를 사용하는 동안, 트리에서 합니다.ng-show을 고려하다ng-if는, 재차 표시되었을 때에 원래의 요소(원래의 것이 키이며, 변경 사항이 아닙니다)의 카피를 배치합니다.

필터링 힌트

이 기사에는 목록을 필터링하기 위한 유용한 팁도 포함되어 있습니다.

를 사용하는 ng-show이 방법으로는 데이터의 하위 목록을 작성할 필요가 없으므로 필터링된 요소를 숨깁니다.

또 다른 기술은 "사용자 입력 디바운스"라고 불립니다.마지막 옵션은 사용자가 입력을 중지할 때까지 필터링을 기다리는 것입니다.jsfiddle의 예를 포함합니다.

더

자세한 내용은 링크된 기사를 참조하십시오.그곳에도 리소스가 나열되어 있기 때문에 좋은 출발점이 될 것입니다.가장 확실한 도전과 빠른 승리가 여기에 나와 있다고 생각한다.

또 하나의 훌륭한 글은 "How does data binding in AngularJS?"입니다.

조금 늦었지만 이 방법이 도움이 될 수 있습니다.

https://github.com/Pasvaz/bindonce

$digest가 더 이상 처리하지 않도록 변경할 의도가 없는 바인딩에 사용할 수 있습니다.

각도 1.3 이상에서는 :: 를 사용하여 한 번 바인드할 수 있습니다.다른 3개의 파티 js를 사용할 필요가 없습니다.

<li ng-repeat="item in :: items">

항목이 변경되지 않으므로 한 번 바인딩할 수 있으면 좋습니다.

데이터 그리드 컴포넌트에서 리스너 수가 1000 이상일 때 성능 문제가 발생했습니다.

나는 react.js를 사용하여 나의 관점을 구축하는 지시문을 사용하여 이 문제를 해결했다. 지시문은 업데이트 기능을 노출시켰다.

(컨트롤러에서) 데이터가 변경될 때마다 업데이트 함수가 디렉티브를 트리거하고 react.display 엔진이 렌더링을 효율적으로 수행했습니다.

각진 프로젝트 내에서 두 번째 주요 프레임워크를 사용하는 것은 큰 오버헤드라는 것을 알고 있습니다.이것은 실제 데이터 바인딩 매직이 아닙니다만, 그 동작은 훨씬 빠릅니다.

결국 저는 angular.js 사용을 중단하고 react.js + FLUS로 이동했습니다.저는 그게 더 낫다고 생각하지만 angular에서 전환하는 것이 쉽지 않다는 것을 알지만 그럴 가치가 있습니다.

react.js를 사용하는 각도 지시어

시계 수를 제한하는 것은 종종 큰 효과를 볼 수 있다.다음은 시계 수를 줄이는 데 효과적인 기술 요약입니다.

http://www.syntaxsuccess.com/viewarticle/547a8ba2c26c307c614c715e

데이터 용량이 큰 ng-grid에서 성능 문제가 발생했는데 Angular Grid로 교체하여 해결되었습니다.웹 사이트의 데모를 보면 100,000개의 행을 쉽게 관리할 수 있습니다.

나는 몇 주 동안 이것과 씨름했다.두 가지가 크게 달라졌다는 것을 알게 되었습니다.

(i) 원타임바인딩: 가능한 한 원타임바인딩을 사용한다.또 (ii) 데바운스: 즉시 전파할 필요는 없지만 250ms를 기다릴 수 있는 입력에 대해서는 데바운스 설정을 한다.이것은 나의 큰 ng-repeat 테이블에 엄청난 변화를 가져왔다.나는 데바운스 설정이 얼마나 효과적이었는지 강조할 수 없다.(여기를 참조해 주세요.https://docs.angularjs.org/api/ng/directive/ngModelOptions)

bject.filength()는 브라우저에 진정한 데이터 바인딩을 가져오기 위한 제안된 메커니즘입니다.오브젝트 및 어레이의 변화를 관찰하기 위한 메커니즘을 공개하여 이러한 오브젝트에 대한 돌연변이를 다른 사람에게 알립니다.

<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<title>Object.observe()</title>

<link rel="stylesheet" href="../css/main.css" />

</head>

<body>

<div id="container">

  <h1><a href="https://shailendrapathakbits.wordpress.com/" title="code_lab_by_shail ">code_lab_by_shail</a> Object.observe()</h1>

    <p>An object <code>o</code> is created and <code>Object.observe()</code> is called on it.</p>

  <p>Three changes are made to <code>o</code> and <code>Object.observe()</code> records these changes as shown below.</p>

  <p>Use the console to find out what happens if you make further changes to <code>o</code>: it's defined in global scope.</p>

  <p>Call <code>Object.unobserve(o, observer)</code> to stop observing changes.</p>

  <p id="data" style="font-size: 14px;"></p>

  <script src="js/main.js"></script>

  <a href="https://github.com/shailendra9/objectobserver/blob/master/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

</div>

<script src="../js/lib/ga.js"></script>

</body>
</html>

디버깅 데이터를 비활성화하여 일반적인 성능을 향상시킬 수도 있습니다.

언급URL : https://stackoverflow.com/questions/15643467/how-to-speed-up-an-angularjs-application