Question

这可能不是关于这个主题的第一个问题，但由于我花了几个小时才发现我找不到一个好的解决方案，我仍然想在这里问你们。

我想优化以下代码，因为该页面现在需要几秒钟加载。如果我将该部分从页面中取出（它只是其中的一部分），则页面最多加载1秒钟。

仅供参考：对于我测试我的申请的学生，我只有 4路。

<tr ng-repeat="route in student.itin">
      <td>
         <select ng-options="airline._id as airline.code for airline in ::airlines | orderBy: 'code'" ng-model="route.airline" class="form-control"/>
      </td>
      <td>
         <input type="text" ng-model="route.flight_number" maxlength="4" size="4" class="form-control"/>
      </td>
      <td>
         <input type="text" ng-model="route.class" maxlength="1" size="1" class="form-control"/>
      </td>
      <td>
         <select ng-options="airport._id as airport.code for airport in ::airports | orderBy: 'code'" ng-model="route.departure.airport" class="form-control"/>
      </td>
      <td>
         <div class="form-group has-feedback" ng-class="{'has-error': route.arrival.date < route.departure.date}">
             <input type="text" class="form-control" is-open="datepickers['departure_date' + $index]" max-date="route.arrival.date" timepicker-options="timepicker_options" ng-focus="open($event, 'departure_date'+$index)" datetime-picker="{{ ::datetimepicker_format }}" ng-model="route.departure.date" />

             <span ng-if="route.arrival.date < route.departure.date" tooltip-placement="right" tooltip="Arrival Date cannot be before Departure Date" tooltip-trigger="mouseenter" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
         </div>
      </td>
      <td>
         <select ng-options="airport._id as airport.code for airport in ::airports | orderBy: 'code'" ng-model="route.arrival.airport" class="form-control"/>
      </td>
      <td>
         <div class="form-group has-feedback" ng-class="{'has-error': route.arrival.date < route.departure.date}">
             <input type="text" class="form-control" is-open="datepickers['arrival_date' + $index]" min-date="route.departure.date" timepicker-options="timepicker_options" ng-focus="open($event, 'arrival_date'+$index)" datetime-picker="{{ ::datetimepicker_format }}" ng-model="route.arrival.date" />

             <span ng-if="route.arrival.date < route.departure.date" tooltip-placement="right" tooltip="Arrival Date cannot be before Departure Date" tooltip-trigger="mouseenter" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
         </div>
      </td>
      <td>
         <input type="text" ng-model="route.filekey" class="form-control"/>
      </td>
      <td class="text-right">
         <a class="btn btn-danger" ng-click="deleteRoute($index)" tooltip-placement="top" tooltip="Delete route" tooltip-trigger="mouseenter">
              <i class="fa fa-trash-o"></i>
         </a>
      </td>
</tr>

我从我的研究中学到的几乎是我不应该使用太多 ng-repeat ，尝试最小化数据绑定和过滤即可。但是在应用了我学到的所有内容之后，我想出了上面的代码并且不知道如何继续优化，因为这还不够。

谢谢

Answer 1

将track by添加到您的ng-repeat
删除可能的过滤器
使用::

或切换到ReactJS。

Answer 2

如果您的AngularJS高于1.4.1，请尝试改进ng-repeat：https://docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates

Answer 3

您可以尝试使用sly-repeat指令代替ng-repeat：http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/

优化/加速AngularJS HTML呈现 - 性能问题

3 个答案: