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性能问题

回答

相关问题