Javascript ng repeat渲染数据需要太多时间

我知道有很多问题已经张贴在同一个问题，但没有一个解决方案在我的情况下工作

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

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

现在，我要寻找的是要么加快ng重复绑定（如果可能的话），要么在收到数据后立即显示数据，并继续添加数据，直到所有行都显示出来

查看下面的代码：

HTML

资产名称
日期/时间
位置
点火
速度
标题
方向
{{cols.aN}}
{{cols.dT}}
{{cols.Lat}}，{{cols.Lon}
{{cols.I}
{{cols.S}
{{cols.H}}
{{cols.D}

JS

var点火\u text=''；
var lat=''；
var-lon=''；
对于（变量i=0；i

---

提前谢谢

您可能根本不需要

$scope.$apply

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

---

根据变量

name

的性质，您也可以消除阵列构建，只需使用正在下载的数据即可。除了

name

之外，您只需使用该数据。

您可能根本不需要

$scope.$apply

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

---

根据变量

name

的性质，您也可以消除阵列构建，只需使用正在下载的数据即可。除了

name

之外，您只需使用该数据。

这里有一个数据大小相似但加载速度更快的plunk。如果您要快速插入，我可以使用您的数据并编辑您的代码，但从外观上看，您只需要将主要任务分配给范围，而无需应用数据并向ng repeat添加轨迹。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;

HTML

{{value.ask}
{{value.bid}
{{value.volume\u btc}，{{{value.volume\u percent}
{{value.last}}
{{value.timestamp}

这是一个数据大小相似但加载速度更快的plunk。如果您要快速插入，我可以使用您的数据并编辑您的代码，但从外观上看，您只需要将主要任务分配给范围，而无需应用数据并向ng repeat添加轨迹。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;

HTML

{{value.ask}
{{value.bid}
{{value.volume\u btc}，{{{value.volume\u percent}
{{value.last}}
{{value.timestamp}

此html页面是从其他页面路由的吗？@Aravind nope不是：（谁能在计算机上读取2000行数据once@USER_8675309我知道这正是我想知道的。实际上，这是一份月报，用户将下载它，但也需要在页面上显示它。您的页面标记已加载，但内容在完全加载后才出现？此html页面是否从另一个页面路由？@Aravind nope不是：（谁能在计算机上读取2000行数据once@USER_8675309我知道这就是我想知道的。事实上，这是一份月报，用户将下载它，但也需要在页面上显示它。您的页面标记已加载，但内容在完全加载后出现？

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

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

<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>