AngularJS 및 Angular Material 성능 문제

저는 각도 재료 탭이있는 angularjs 응용 프로그램을 개발 중입니다. 나는 서버에서로드 목록을 많이 드롭 다운 (한 번, 페이지로드시). 문제는 내가 탭을 전환하거나 md 선택 요소를 열려고 할 때 애니메이션 지연이 많이 발생한다는 것입니다 (크롬 개발자 도구에 따르면 10-30fps 사이에 있음).AngularJS 및 Angular Material 성능 문제

내가 주된 이슈는 md-option 요소가 많고 ng-repeat에 의해 생성 된 것이라고 생각합니다. md-selects 나는 앱 전체를 가지고 있습니다. 콘솔에있는 document.getElementByTagName("md-option")을 보면 약 1000 개의 DOM 요소가 생성됩니다.

어떻게 md-select에서 ng-repeat 속도를 향상시킬 수 있습니까? 이러한 드롭 다운 목록에서 ng-repeat를 md-virtual-repeat으로 바꾸는 방법이 있습니까?

페이지의 모든 상수 텍스트도 언어 파일에서로드되며 나는 {{ ::variableName }}을 사용하여 해당 모델을 보지 못하도록합니다.

또한 각 탭은 ng-include="path/to/htmlFile"을 사용하여 HTML을로드합니다. 더 빠르고 더 좋은 방법이 있습니까?

<md-tab ng-click="nextTab($event)" label="{{lang.tabPD}}" md-on-select="vm.tabName='tabPD'" md-no-pagination="true"> 
    <div ng-include="'app/modules/partials/tabPD.html'" ng-controller="PDCtrl"></div> 
</md-tab> 
<md-tab> 
...another div with ng-include 
</md-tab> 
etc

당신이 내게 줄 수있는 조언은 깊은 평가를받을 것입니다.

출처

2016-09-18 IvanSt

어떤 버전? 그들의 탭에는 계속 개선하려는 성능 문제 (github 문제 추적기 참조)가 많이 있습니다. – charlietfl

최신 버전 인 1.1.1을 사용하고 있습니다. – IvanSt

모든 솔루션으로 성능이 크게 향상 될 수있는 몇 가지 솔루션이 있습니다. 아이들 -

대신 ng-repeat 당신이 abstract:true 및 탭있을 것입니다 별도의 ui-view 그래서 루트 탭 컨테이너 state 아래에 넣을 수 있습니다 md-virtual-repeat
각 탭을 사용하려고합니다. DOM 크기를 줄여야합니다 a.e. 하나의 탭만 렌더링됩니다.

저는 md-select이 많은 관찰자를 잡아 먹음으로써 내가 무엇을했는지에 동의합니다 : React**의 항목 구성 요소를 생성했습니다.

.state('sidemenu.activity-drill', { 
        url: '/activity-drill/:id', 
        abstract:true, 
        views: { 
         'content': { 
          templateUrl: 'views/activities/activity-details.html', 
          controller: 'ActivityDetailsCtrl' 
         } 
        } 
       }) 
       .state('sidemenu.activity-drill.chat',  { url: '/chat',  templateUrl: 'views/activities/activity-tab-chat.html'}) 
       .state('sidemenu.activity-drill.notes',  { url: '/notes',  templateUrl: 'views/activities/activity-tab-action-big-notes.html'}) 
       .state('sidemenu.activity-drill.ais',  { url: '/ais',  templateUrl: 'views/activities/activity-tab-action-items.html'}) 
       .state('sidemenu.activity-drill.minutes', { url: '/minutes', templateUrl: 'views/activities/activity-tab-minutes.html'}) 
       .state('sidemenu.activity-drill.files',  { url: '/files',  templateUrl: 'views/activities/activity-tab-media.html'}) 
       .state('sidemenu.activity-drill.flags',  { url: '/flags',  templateUrl: 'views/activities/activity-tab-flags.html'}) 
       .state('sidemenu.activity-drill.people',  { url: '/people',  templateUrl: 'views/activities/activity-tab-people.html'}) 
       .state('sidemenu.activity-drill.objectives', { url: '/objectives', templateUrl: 'views/activities/activity-tab-objectives.html' }) 
       .state('sidemenu.activity-drill.meetings', { url: '/meetings', templateUrl: 'views/activities/activity-tab-meetings.html' }) 
       .state('sidemenu.activity-drill.angular2', { url: '/angular2', templateUrl: 'views/activities/activity-tab-angular2.html'})

탭 구조 :

<md-tab ng-repeat="tab in activity_details_tab_position" ui-sref="{{tab.route}}"> 
       <md-tab-label > 
        <span translate="{{tab.name}}"></span>       
       </md-tab-label> 
      </md-tab> 
     </md-tabs> 

     <div ui-view></div>

가상 반복 예 :

이 내 코드에서 탭의 route 예입니다 빠른

작품

 <div> 
      <p>{{(meeting.timestamp_start * 1000)| date:'EEE dd MMM'}}</p> 
      <p>{{((meeting.timestamp_start * 1000) | date : 'HH:mm')}}</p> 
     </div> 

     <div> 
      <div layout="row"> 
       <span >{{meeting.meeting_name}}</span> 
      </div> 
     </div> 
    </div> 
</md-virtual-repeat-container>

, 그것은 도움이 될 것입니다 희망은 각 재료의

출처

2016-09-18 12:42:03

AngularJS 및 Angular Material 성능 문제

답변

관련 문제