角度材料md-select和ng-repeat的性能缓慢

Question

我正在使用角度和角度材料编写企业应用程序,并且对中等大小(在我看来)形式的性能有问题.特别是在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而是文字......

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

Answer 1

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

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