javascript - 绑定(bind) JSON 数据时 HTML 表格渲染缓慢

Question

此处使用 angularjs (1.3) 和 webapi。

我有用户可以上传 Excel 文件的 UI。我的 api 读取 Excel 文件并将行数据以 JSON 形式返回给 UI。

然后，UI 读取 JSON 并将其绑定(bind)回 UI 表。

此 UI 表格的行和列是动态生成的并且不是固定的，因此我在 HTML 中使用 contenteditable，因为用户可以添加更多行。

我可以从 JSON 中读取并填充保存这些 json 值的数组。问题是在渲染时，屏幕被卡住并且需要时间来渲染所有数据。我当前正在绑定(bind)大约 800 行，屏幕卡住并需要大约 10-15 秒或更长时间才能填满 UI 表。我将拥有更多数据，因此寻找解决方案。

我尝试调试，发现从 API 获取数据以及从 API 读取 JSON 都没有问题。填充数组时也没有问题。一旦数组填充完毕，问题就来了。 UI 卡住并需要一些时间来呈现此数据。

我不确定这里发生了什么或者为什么需要这么长时间来渲染。下面是一些示例相关代码:

//Read json from the API

$http.get('https://api.myjson.com/bins/d1ugw').success(function(data) {
if (data.length > 0) {   

  $scope.setJson = data;
  $scope.initializeTable(true);
  var columns = $scope.targetTable.columns;

  //These are the 3 columns of the Table but can vary dynamically(currently just hardcoding it)
  var refColName = "state, month , year";

  //Push the columns to the table array
  var colArray = refColName.split(',');
  for (var i = 0; i < colArray.length; i++) {
    $scope.targetTable.columns.push({
      id: columns.length,
      refColName: refColName.split(',')[i]
    });
  }

  //Read the values from the json
  var idValues = $scope.getTableValues($scope.setJson, 'id');
  var commentValues = $scope.getTableValues($scope.setJson, 'comment');
  var rowValues = $scope.getTableValues($scope.setJson, 'refcol');
  var setIdValues = $scope.getTableValues($scope.setJson, 'sid');

  //Push the data back to the table array.
  $scope.pushRowData($scope.targetTable, rowValues, commentValues, idValues, setIdValues);
  //Till the above steps everything happens quickly and I can see $scope.targetTable being populated with my json. 
  //But after the above step the screen just freezes and takes time to show the entire data on the UI table.
 }
  });

下面是UI的相关代码:

<tbody>
    <tr ng-repeat="r in targetTable.rows">
      <td class="fixed-width">
        <span>
            <a class="btn-xs" ng-show="row == $index" ng-if="targetTable.rows.length > 1"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
        </span>
        <span contenteditable="true" ng-model="r.tableId" ng-change="addNewRow(r.tableId, r)">{{r.tableId}}</span>
      </td>
      <td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-change="rowDataChange(r[column.id])"></td>
      <td class="comment-fixed-width" contenteditable="true" ng-model="r.comment" ng-change="rowDataChange(r.comment)"></td>
      <td class="blank fixed-width" colspan="2" ng-model="r[column.id]"></td>
    </tr>
  </tbody>

我创建了下面的 JSFiddle 来展示我的示例和我面临的问题。

http://jsfiddle.net/aman1981/u1vbeos5/312/

我还在我的 jsfiddle 中添加了注释，以显示什么方法做什么。

如果有人能帮助我解决这个问题，我将不胜感激。

Answer 1

以下是一些性能统计数据:

内容可编辑(约 4000 个摘要调用)= 1.800ms -> http://prntscr.com/lweugn

没有内容可编辑(~4 个摘要调用)= 1.300ms -> http://prntscr.com/lweusn

分页仅显示前 50 个结果 = 0.200ms -> http://prntscr.com/lwev09

由于 DOM 变化明显，您的性能损失最大。但请记住，摘要周期的数量和持续时间是良好性能的关键。尤其是当你有大量的观察者时。这是一个直接比较: http://prntscr.com/lwf1nn正如您所看到的，摘要循环消耗了整体性能的 30%，但这并不是丢帧的原因。掉帧主要是由于 DOM 变化引起的。画这么大的 table 需要一些时间。

此外，当您的 REST 调用完成时，表格将开始呈现。在我的例子中，此调用大约需要额外 1.700 毫秒。因此从开始到渲染结果需要近 3.500 毫秒。即使分页 1.900 毫秒。

我建议使用搜索分页，但无论如何您都可以尝试提高性能。

有用的链接是:

https://stackoverflow.com/a/47347260/8196542

https://www.codeproject.com/Articles/1173869/%2FArticles%2F1173869%2Fng-repeat-performance-degradation-at-case-of-very