我应该在我的 Angular 应用程序中将 10,000 行加载到内存中吗？答案

【问题标题】：Should I load 10,000 rows into memory in my Angular app?我应该在我的 Angular 应用程序中将 10,000 行加载到内存中吗？
【发布时间】：2014-03-09 23:10:07
【问题描述】：

我正在 Angular.js 中构建一个客户管理工具，将 10,000 个客户直接加载到 $scope。从那里我可以搜索和操作任何数据，而无需调用服务器（与我只是调用一个小数据集并使用分页相比）。

但是现在，一旦将数据加载到范围内，我的浏览器就会不断崩溃或严重滞后。加载到范围中的 10,000 名客户数据是问题还是我的代码有问题（在处理数据时，例如在我实施自动建议的情况下）？

【问题讨论】：

当您有多个用户访问系统时，请考虑为每个线程在服务器内存中存储 10000 条记录，这会保证您的服务器过载，这也是为什么大多数人只加载他们实际需要的数据子集的原因。 ...大量的小数据量请求很容易被服务器处理，但是一些大数据量的请求会很快淹没它
如果您不发布简洁的代码示例，我们将无法为您提供帮助。
这可能不是数据库的原始大小，而是您用来访问它的代码。
问题是将这么多记录加载到 JavaScript 中。服务器可以很容易地处理这么多的记录，但是要一次性通过网络发送大量的记录，而且要在客户端保存大量的记录。值得重新启动您的浏览器，然后查看它的 RAM 需求增加 - 我怀疑您会发现它过多。你能通过分页减少这种情况吗？
分页并使用 bindonce，您将被设置。

【解决方案1】：

我建议使用 MySQL 查询使用直接搜索。我只想提一下，10,000 条数据实际上并不是很多数据，如果索引正确，则需要时间才能找到。

【讨论】：

【解决方案2】：

过去我不得不处理类似的事情。大量数据，如果你把它放在示波器上，那么 ng-repeat 会杀死浏览器，因为它会尝试绘制 10,000 个节点。这就是我所做的。

我也在 $scope 中添加了一个“限制”变量：

$scope.limit = 20;

然后在您的 ng-repeat 中使用该限制：

ng-repeat="thing in things | limitTo:limit"

那么它将只显示 10,000 中的特定数量，而不是全部。这将显着提高您的表现。然后你需要添加一个 ng-scroll 事件，它将限制增加 10。在你的东西的容器上，添加一个 ng-scroll。

<div ng-scroll="increaseLimit()">
    <span ng-repeat="thing in things | limitTo:limit"><!--Your template--></span>
</div>

现在实现 increaseLimit 方法：

$scope.increaseLimit = function(){
    $scope.limit += 10;
}

这将允许您在您的内容上滚动，而不会杀死您的页面。让我知道你的想法。

另一个建议，如果你对你的大客户数组进行任何过滤，你应该使用 lodash。 Lodash 有一些疯狂的性能，可以让你完成所有的过滤。

【讨论】：