AngularJS는 2000개 정도의 요소를 사용하여 렌더링하는 데 시간이 많이 걸립니까?

AngularJS는 2000개 정도의 요소를 사용하여 렌더링하는 데 시간이 많이 걸립니까?

바이올린을 소개합니다.http://jsfiddle.net/D5h7H/7/

다음 내용을 렌더링합니다.

<div ng-repeat="group in Model.Groups">
    <span>{{group.Name}}</span>
    <div ng-repeat="filter in group.Filters">
        <input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
        <select ng-disabled="!filter.enabled">
            <option ng-repeat="value in filter.Values">{{value}}</option>
        </select>
    </div>
</div>

서버에서 json으로 로드된 후 사용자에게 렌더링되는 필터 목록입니다(예에서 json은 바로 이 Fielen에서 생성됩니다).현재 30개의 필터로 구성된 6개의 그룹이 있으며 각 필터에 대해 15개의 옵션 요소가 있습니다.

Firefox에서는 UI를 다시 그리는 데 약 2초가 소요됩니다.

각도 js는 이 시간 괜찮아요?제가 잘못해서 2초 렌더링한 것이 있습니까?(2000개의 요소가 큰 수치로 보이지는 않지만, 2초라는 것은 확실합니다.)

AngularJS 1.3+에는 다음과 같은 기능이 내장되어 있습니다.

원타임 바인딩 표현의 주된 목적은 바인딩을 작성하는 것입니다.바인딩이 안정되면 등록이 해제되고 리소스가 해방됩니다.감시되는 식 수를 줄이면 다이제스트루프가 고속화되고 동시에 더 많은 정보를 표시할 수 있습니다.

바인딩을 을 사용합니다.::바인드 값에 도달합니다.

<div>{{::name}}</div> 

관련 설명도 참조해 주세요.

• 데이터 바인딩 없이 값 렌더링
• AngularJS에서 데이터 바인딩은 어떻게 작동합니까?
• 요소의 바인딩을 진정으로 막는다 - 요소의 바인딩을 해제한다 - 각진JS

데이터가 바인딩된 후 UI를 업데이트할 필요가 없는 경우 bindonce를 확인해야 합니다. bindonce는 개체가 로드될 때까지 기다렸다가 바인딩을 수행할 수도 있습니다.시간을 대폭 절약하고 데이터 처리 시간을 단축할 수 있습니다.$watch()특히 제대로 사용한다면 극적으로 됩니다.

그건 앵글이...JS가 더티 체크를 합니다.다음은 Angular를 사용한 느린 렌더링에 대한 결정적 답변입니다.JS.

이 프로젝트를 사용하면 angular-vs-repeat으로 퍼포먼스가 향상됩니다.

이 기능을 사용하면 브라우저는 요소를 렌더링하는 스크롤 가능 컨테이너에 맞는 요소만 렌더링합니다(따라서 각도 검사는 더티 검사를 수행합니다).데모는 이쪽

오래된 질문인 건 알지만 아직 답이 안 올라온 것 같아요.

만이 아니라 이상의 요소를 하여 폼 합니다.ng-model. Angular에 내장된 폼 검증은 매우 강력하고 편리하지만 특히 폼을 처음 로드할 때 동작이 매우 느려질 수 있습니다.이 180(6x30) 입력 요소가 다음과 같은 것을 사용하는 경우ng-checked대신ng-model폼 검증 메커니즘을 회피하면 폼 로드가 훨씬 빨라집니다.

<input type="checkbox" ng-checked="filter.enabled">{{filter.Name}}

1회성 바인딩을 통해 감시자 감소::이 상황에도 도움이 될 것입니다만, 제 생각에 당신의 주된 문제점은ng-model및 각도 형태 검증.

로딩해야 할 아이템이 2000개 정도이므로 한 번에 렌더링할 필요는 없습니다.페이지를 스크롤하거나 페이지를 변경할 때 적극적으로 렌더링할 수 있습니다.이 질문을 참조해 주세요.

필터 ID와 같은 고유 ID를 사용하여 ng-repeat이 모든 돔을 작성하는 시간을 최소화합니다."추적 및 중복'

위의 alecxe의 답변으로 일회성 바운딩을 사용합니다.그것이 적절하지 않은 경우는, 다음과 같이 다이제스트 빈도를 늦출 수 있습니다.ng-model-options="{ debounce: 200 }각도 옵션 설정

마지막으로 성능 분석 툴을 사용하여 애플리케이션의 병목 현상을 추적하고 수정해야 합니다.

이게 도움이 됐으면 좋겠다.

ng-repeat="filter in group.Filters | track by:filter.id | limitTo: NumPerOperation"

이 두 개의 각도 모듈을 사용하면 테이블의 렌더화를 훨씬 빠르게 수행할 수 있습니다.

"quick-ng-http://https://github.com/allaud/quick-ng-repeat"

"http-http:/https://github.com/infinite-scroll/infinite-scroll

이것은 「ng-repeat」의 퍼포먼스를 향상시키는 솔루션이 아닙니다.이것은 테이블을 고속화하기 위한 다른 어프로치입니다.

대체물ng-repeat="group in Model.Groups"와 함께collection-repeat="group in Model.Groups".

언급URL : https://stackoverflow.com/questions/15183095/angularjs-really-slow-at-rendering-with-about-2000-elements