angularjs – 角度材料md-select和ng-repeat的慢速性能

我正在使用角度和角度材料编写企业应用程序,并且对中等大小(在我看来)形式的性能有问题.特别是在IE中.

(工作演示,请参阅https://codepen.io/tkarls/pen/vGrqWv.点击卡片标题,然后在打开之前暂停.特别是使用IE和移动设备.桌面镀铬工作得非常好.)

表格中最严重的违规者似乎是一些md选择,他们使用ng-repeat.

<md-select ng-model="form.subchannelId" ng-disabled="vm.readOnly">
    <md-option ng-repeat="id in subchannelIds" value="{{::id}}">{{::id}}</md-option>
</md-select>
<md-select ng-model="form.serviceReference" ng-disabled="vm.readOnly">
    <md-option ng-repeat="id in serviceReferences" value="{{::id}}">{{::countryId}}{{::id}}</md-option>
</md-select>
<md-select ng-model="form.audioCodec" ng-disabled="vm.readOnly">
    <md-option ng-repeat="audioCodec in audioCodecs | orderBy:'toString()'" value="{{audioCodec}}">{{::systemVariables.encoders.aac[audioCodec].displayName}}</md-option>
</md-select>
<md-select ng-model="form.audioSource" ng-disabled="vm.readOnly">
    <md-option ng-repeat="audioSource in audioSources | orderBy:'toString()'" value="{{audioSource}}">{{audioSource}}</md-option>
</md-select>
<md-select ng-model="form.padSource" ng-disabled="vm.readOnly">
    <md-option ng-repeat="padSource in padSources | orderBy:'toString()'" value="{{::padSource}}">{{::padSource}}</md-option>
</md-select>
<md-select ng-model="form.lang" ng-disabled="!form.generateStaticPty || vm.readOnly">
    <md-option ng-repeat="langKey in langKeys | orderBy:'toString()'" value="{{::langs[langKey]}}">{{::langKey}}</md-option>
</md-select>
<md-select ng-model="form.pty" ng-disabled="!form.generateStaticPty || vm.readOnly">
    <md-option ng-repeat="ptyKey in ptyKeys | orderBy:'toString()'" value="{{::ptys[ptyKey]}}">{{::ptyKey}}</md-option>
</md-select>

数据模型如下：

$scope.subchannelIds = [0,1,2]; //up to 63 in real life
$scope.serviceReferences = ["000","001","002"]; //up to 999 in real life
$scope.ptys = {
  "No programme type": 0,"News": 1,"Current Affairs": 2}; //Up to ~30 in real life
$scope.ptyKeys = Object.keys($scope.ptys);
$scope.langs = {
  "UnkNown": "00","Albanian": "01","Breton": "02"}; //Up to ~100 in real life
$scope.langKeys = Object.keys($scope.langs);

其他ng-repeats很小,每个3-5项.我认为现代浏览器应该处理这种大小的数据集并快速渲染它.所以我希望我的HTML代码做得非常糟糕.数据是从现实生活中的服务器获取的,但我预先获取它,所以一旦表单准备好显示它已经在$scope中.

在使用普通的js循环获取数据后,我尝试预生成HTML.然后只插入HTML代码段：
    
        {{:: preGeneratedHtmlHere}}
    

但是那么棱角不会把它当作html而是文字……

任何有关如何优化这一点的帮助表示赞赏！

解决方法

角度材料具有非常差的性能,因为固定到范围的物体是巨大的,这使得消化周期非常长且不太好.

您应该首先使用默认的select和ng-options(DOCS HERE)进行尝试.如果这对你更好,我建议使用普通的HTML,然后使用MaterializeCSS来获得Material Design的外观和感觉.