AngularJS和Angular Material性能問題

我正在使用7個角度材質選項卡來處理angularjs應用程序。我有很多從服務器加載的下拉列表（只有一次，在頁面加載時）。問題是，當我嘗試切換標籤或打開md-select元素時（根據chrome開發人員工具，最好在10-30 fps之間），我有很多動畫滯後。AngularJS和Angular Material性能問題

我認爲主要問題是md-option元素生成的ng-repeatmd-selects我已經遍佈整個應用程序。控制檯中的快速document.getElementByTagName("md-option")顯示了爲此生成的大約1000個DOM元素。

如何提高md-selection中的ng-repeat速度？有沒有辦法在這些下拉列表中用md-virtual-repeat替換ng-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嘗試使用md-virtual-repeat
每個選項卡，您可以在單獨的ui-view所以根標籤的容器state把將abstract:true和標籤 - 孩子。它應該減少DOM大小a.e.只有一個選項卡呈現
我同意md-select吃了很多觀察者，所以我做了：在React**中創建了Item組件。工作快

這是我的代碼標籤route例如：

.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>

虛擬重複例如：

 <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性能問題

回答

相關問題