AngularJSとAngular Materialのパフォーマンスの問題

Question

私はanglejsアプリケーションで7つの角度の材料のタブを使って作業しています。私は、サーバーからロードリストをたくさん持っている（ページロード時に一度だけ）。問題は、タブを切り替えたり、md-select要素を開こうとするとアニメーションが遅れることが多いことです（クローム開発ツールによれば、最高で10〜30fpsの間）。

私は、主な問題は、私はすべてのアプリの上に持ってmd-selectsでng-repeatによって生成md-option要素の大ammountだと思います。コンソールにある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 

あなたが私に与えることができるヒントは、深く感謝します。

Answer 1

パフォーマンスが大幅に向上する可能性のあるソリューションがいくつかあります。子供 -

• は、代わりにng-repeatあなたがabstract:trueとタブになります別のui-viewので、ルートタブコンテナstate下に置くことができますmd-virtual-repeat

• 各タブを使用してみてください。 DOMサイズを小さくする必要があります。 1つのタブのみがレンダリングされます

• 私は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> 

は角材料のどのバージョン