javascript - 与其他解决方案相比，内置 ng-table 分页在性能方面存在困难

Question

我目前正在我的应用程序中尝试不同的分页实现。

我非常想使用 ng-table 和分页构建，但在处理数千条记录时似乎非常困难。是的，这是很多记录，但我能够构建一个不同的分页，可以轻松处理数十万条记录，并且比 ng-table 快得多.

情况是我有下面列出的两个实现。第一个是 ng-table，另一个是神秘的更好的实现。

我尝试将这两种实现限制为所需的绝对最少代码，希望获得最佳答案，我希望这已经足够了

我的问题:如何最好地实现 ng-table 分页(如下面的实现)以获得最佳性能。和/或如何更改 ng-table 以解决其通过过滤/分页处理大量记录的性能问题？

Ngtable 实现(奋斗者)

没有什么异常的实现方式。

http://plnkr.co/edit/ISa4xg?p=info

Controller

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

表

<table ng-table="tableParams" class="table">
     <tr ng-repeat="user in $data">
         <td data-title="'Name'">{{user.name}}</td>
         <td data-title="'Age'">{{user.age}}</td>
     </tr>
 </table>

实现困难

http://jsfiddle.net/2ZzZB/56/

Controller

$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.numberOfPages=function(){
    return Math.ceil($scope.data.length/$scope.pageSize);                
}
for (var i=0; i<45; i++) {
    $scope.data.push("Item "+i);
}

HTML

<li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
        {{item}}
</li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
</button>

Answer 1

第一个实现速度较慢，因为您在分页函数中调用 data.slice() 。这会创建一个新数组，因此随着数组变大，速度会变慢。换句话说，调用 slice() 进行分页将在 O(N) 时间内运行。

第二个示例只是通过索引访问数组中的条目，无论数组大小如何，这都将是 O(1) 时间。

正如我在上面的评论中所说，这里真正的问题是您正在执行客户端分页。无论您如何实现，当您达到数十万条记录时，客户端分页都会减慢您的应用程序的速度；即使分页速度很快，在内存中保存这么多数据也会减慢浏览器的速度。对于该大小的数据，您需要使用服务器端分页。