Question

我有一个AngularJS应用程序，可以渲染大约200-250个元素。每个重复的元素都包含内部项，其中一些具有嵌套的ng-repeats。在运行时，JS Heap内存分配大约为70MB，导致网页多次崩溃，如果没有，肯定会影响其他打开的标签。 Batarang建议大约有3000多个Scope项目（带有$ id）。我将我的指令重组到了一个点，只有大约700-800个Scope项。但是内存消耗不在图表中，并且性能没有明显改善。但是，在运行分析工具时，如果我单击垃圾收集器图标，则内存消耗会下降大约15 MB。任何人都可以告诉我应该如何调试这样的问题吗？

更新以下是重复的指令结构：

<li class="reminder-content">
   <wizards/>
   <editwidget></editwidget>
   <div style="font-size:87%;padding-left:5px;">{{::reminder.time| date:"shortTime"}} <span class="date-particulars">{{::reminder.time | dateFilter}}<span class="date-particulars-date">Reminder was set for <strong>{{::reminder.time | date:"longDate"}}</strong></span></span></div>
   <div class="reminder-body">
      <p class="{{reminder.trip.destination}}">{{::reminder.trip.destination}}</p>
      <p class="pad-top">{{::reminder.text}}</p>
      <p class="pad-top"  id="trav_name"><a href="{{::reminder.traveler.conversationLink}}" target="_blank">{{::reminder.traveler.name}}</a></p>
      <p>{{::reminder.wizard.id | customFilter:this}}</p>
   </div>
</li>



<reminder ng-repeat="reminder in reminders.delegatedReminders track by reminder._id| orderBy:'time'"></reminder>

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <img src="./images/Picture1.bmp" class="swap"> </div>附上了观察者。您需要将所有这些优化为单向绑定＆＃39;

像这样：

ng-repeat

还要注意模板中的此类构造，例如ng-repeat="item in ::$ctrl.items"。请改用{{smth}}。

另外，请勿使用{{::smth}}，$watch，$broadcast。始终使用$emit代替'<'作为绑定。如果你使用1.5+角，你可以使用生命圆钩。

'='

Answer 2

这就是你如何实现它的目的：

//catch the results returned by $watch
var deReg = $scope.$watch('yourModelValue', function(){

    //your code
});

//De-register watch on destroy event
$scope.$on('$destroy', deReg);

//or you can do it following way if u have multiple watches

 $scope.$on('$destroy', function() {
   deReg();
 });

AngularJS异常高的内存消耗

2 个答案: