使用角度材质md-select和ng-repeat时性能较低

Question

我正在编写一个使用角度和角度材料的企业应用程序，对中等大小(在我看来)的表单的性能有问题。尤其是在IE中。

(工作演示，请参阅https://codepen.io/tkarls/pen/vGrqWv。点击卡片标题，在打开之前它会稍微暂停一下。尤其是使用IE和移动端。桌面chrome运行得很好。)

表单中最糟糕的违规者似乎是一些带有ng-repeat的md-select。

<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-repeat很小，每个有3-5个项目。我认为现代浏览器应该处理这种大小的数据集，并非常快地呈现它。所以我希望我的HTML代码出了大问题。在现实生活中，数据是从服务器获取的，但是我确实预先获取了数据，所以一旦表单准备好显示，它就已经在$scope中了。

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

但angular不会将其视为html而是文本...

任何关于如何优化这一点的帮助都是非常感谢的！

Answer 1

角度材料的性能非常差，因为固定在范围内的对象很大，这使得消化周期非常长且性能低下。

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

Answer 2

是的，将其全部设为普通的html将会加快速度，但是那样你就会失去所有的眼花缭乱。要获得这两个世界的优点，您可以做一些基本的优化。

，

1. ，你真的需要关注这个集合吗--这些集合会改变吗?如果改变了，你不能触发一个摘要吗？正如您对id所做的那样，您还可以单向绑定重复的集合。

ng-repeat="id in ::serviceReferences"

1. 你并不真的需要预先加载所有的选项，对吧？由于您使用的是angular-material，因此默认的下拉列表将与多个元素交换，以模拟下拉列表行为。我只是删除了选项列表，将其替换为实际选择的元素，并仅在控件获得焦点时填充列表。请参阅documentation.

尽管如此，我还是同意angular-material性能很差。它根本就不能很好地扩展。1-2个控件可以工作，但是如果你有超过10个控件，它就会开始失效。

附言:不要煮$scope汤！

Answer 3

因为在ng-repeat中有大量的项目会导致一些问题。当angular使用ng-repeat创建嵌套列表时，将为每个项目创建一个观察器。成百上千的观察者会在moible (可能还有IE )上明显降低性能。我们曾经在ng-repeat中遇到过这个问题，所以最好的做法是尽可能避免使用ng-repeat，在真正需要的时候创建并附加watcher。

所以我认为可能的解决方案是，尝试使用normal for循环而不是ng-repeat。