Question

我正在使用带有信号器的angularjs。我有一个表，在服务器端创建所有行。我检查了服务器端的所有性能，没关系。当调用我的客户端方法插入大约5000行时，它们需要几秒钟才能显示在GUI中。我尝试添加track by $index和track by row.rowId，但它仍然很慢。

在制作CPU配置文件并检查chrome dev工具中的图表时，我找不到任何需要花费很长时间的事情。所以我在这里很丢失。

服务器端方法（应该是这里的问题）：

00：00：00.0024354

客户端方法（insertSubRows）：

191.9400000000005（毫秒）

为什么行显示在GUI中需要这么长时间？

js功能：

myHub.client.insertSubRows = function (rowId, rows) {
    var t0 = performance.now();
    $scope.totalRows = $scope.totalRows + rows.length;
    for (var i = 0; i < $scope.rows.length; i++) {
        if ($scope.rows[i].rowId === rowId) {
            for (var j = 1; j <= rows.length; j++) {
                $scope.rows.splice(i + j, 0, rows[j - 1]);
            }
            break;
        }
    }
    $scope.$apply();
    var t1 = performance.now();
    console.log('insertSubRows ' + (t1 - t0));
}

$scope.renderCellValue = function(row, column) {
    var getter = $parse(column.Value);
    return getter(row);
}

我的表：

<table class="table table-striped table-hover table-responsive table-bordered testclass" id="posTable">
            <thead style="font-weight: bold;">
            <tr>
                <th ng-repeat="column in columns"
                    ng-if="column.Checked"
                    ng-class="{'text-right' : column.TextRight }">
                    <a href="#" ng-click="sortColumn(column.SortType)" ng-if="column.SortType !== null">
                        {{column.Header}}
                        <span ng-if="sortType == column.SortType && sortReverse" class="caret"></span>
                        <span ng-if="sortType == column.SortType && !sortReverse" class="sort"></span>
                    </a>
                    <div ng-if="column.SortType === null">{{column.Header}}</div>
                </th>
            </tr>
            </thead>
            <tbody>
            current-page="pagination.current"-->
            <tr dir-paginate="row in rows
                    | itemsPerPage: pageSize
                    | filter:searchText
                    | filter:row.IsVisible
                    | orderBy:sortType:sortReverse"
                data-ng-click="toggleNode(row)"
                data-ng-show="row.IsVisible"
                data-flash="row.IsVisible">
                <td ng-repeat="column in columns"
                    ng-if="column.Checked">
                    {{renderCellValue(row, column)}}
                </td>

            </tr>
            </tbody>
        </table>

Answer 1

5000行很多并且性能会受到影响，您需要通过服务器端的数据分页或推出自己的虚拟化解决方案（即无限滚动）来设计备用解决方案，结帐http://ui-grid.info/docs/#/tutorial/404_large_data_sets_and_performance虚拟化的例子

angularjs表的性能问题

1 个答案: