javascript - 优化/加速 AngularJS HTML 渲染 - 性能问题

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，尝试最小化数据绑定(bind)和过滤器 。但是在应用我所学的一切之后，我想出了上面的代码并且不知道如何继续优化，因为这还不够。

谢谢

Answer 1

• 将 track by 添加到您的 ng-repeat
• 尽可能去除过滤器
• 使用一次性绑定(bind) ::

或者切换到 ReactJS。