ng重复渲染数据花费了太多时间

ng-repeat takes too much time to render data

本文关键字：太多 时间 数据 ng      更新时间：2023-09-26

我知道同一个问题已经发布了很多问题，但没有一个解决方案适用于我的情况。

在调用web服务时，我得到JSON响应。在这个JSON中，大约有2000多个对象，我需要在表上显示这些对象的数据。我想显示表中的所有(2000+(记录，是的，我不能限制或分页，需要在一个页面上显示它(我知道这很愚蠢，但这是业务要求(。我不需要排序或搜索。

数据传输大约为2MB，请求大约在2-4秒内完成，但在页面上呈现数据大约需要10-15秒。

现在，我想要的是加快重复绑定的速度(如果可能的话(，或者在收到数据后立即显示数据，并继续添加，直到显示所有行。

查看下面的代码：

HTML

<table class="table table-bordered table-striped cf">
<thead style="color: #333;">
<tr>
<td>Asset Name</td>
<td>Date/ Time</td>
<td>Location</td>
<td>Ignition</td>
<td>Speed</td>
<td>Heading</td>
<td>Direction</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="cols in tableData">
<td>{{ cols.aN }}</td>
<td>{{ cols.dT }}</td>
<td>{{ cols.Lat }}, {{ cols.Lon }}</td>
<td>{{ cols.I }}</td>
<td>{{ cols.S }}</td>
<td>{{ cols.H }}</td>
<td>{{ cols.D }}</td>
</tr>
</tbody>
</table>

JS-

var ignition_text = '';
var lat = '';
var lon = '';
for (var i = 0; i < data.length; i++) {
    if (data[i].ignition = 1) {
        ignition_text = "On";
    } else {
        ignition_text = "Off";
    }
    $scope.$apply(function() {
        $scope.tableData.push({
            aN: name,
            dT: data[i].eventUTCTime,
            Lat: data[i].latitudeDegrees,
            Lon: data[i].longitudeDegrees,
            I: ignition_text,
            S: data[i].speedMPH,
            H: data[i].longitudeDegrees,
            D: data[i].latitudeDegrees
        });
    });
}

提前感谢！

您可能根本不需要$scope.$apply。即使您需要它，也应该只在将所有数据推送到表中后使用它。否则，每个添加的条目都将强制执行摘要循环。只需构建您的数组，并将完成的数组分配给scope变量。然后angular将只构建一次表。

根据变量name的性质，您也可以消除阵列构建，只使用正在下载的数据。除了name，您无论如何都只需要使用这些数据。

这里有一个数据大小相似但加载速度更快的plunkhttp://plnkr.co/edit/I4rN1ZMaR3e1mbcsJ9Ka.如果你要快速弹出，我可以使用你的数据并编辑你的代码，但从外观上看，你只需要将主要任务分配到范围，而不需要申请数据并在ng重复中添加一个音轨。SN：您可能希望在for循环中操作数据，然后对作用域进行赋值。

for (var i = 0; i < data.length; i++) {
    if (data[i].ignition = 1) {
        ignition_text = "On";
    } else {
        ignition_text = "Off";
    }
    }
    $scope.tableData=data;

JS-

 $http.get("largeData.json").then(function(response) {
    vm.test = response.data;
  });

HTML

<tbody>
      <tr ng-repeat="(key, value) in main.test track by $index ">
        <td>{{ value.ask }}</td>
        <td>{{ value.bid }}</td>
        <td>{{ value.volume_btc }}, {{ value.volume_percent }}</td>
        <td>{{ value.last }}</td>
        <td>{{ value.timestamp }}</td>
      </tr>
    </tbody>
相关文章：