如果你正在学习 AngularJS，那么你一定经常使用 ng-repeat 指令来循环展示数据。然而，存在大量数据时，使用 ng-repeat 可能导致页面变得缓慢，响应时间变长。那么该如何解决这个问题呢？本文将带你深入了解 ng-repeat 的问题，并提供解决方案。
问题症状
当我们使用 ng-repeat 循环展示大量数据时，页面响应时间明显变慢，特别是当数据量增加时。原因是每次数据更新都会触发 ng-repeat 的重新计算，导致页面重复渲染，浏览器需要花费更多的时间来执行 JavaScript 代码，从而导致性能下降。我们可以使用 Chrome DevTools 的 Performance 工具来检测页面性能，从而更好地了解问题所在：
如上图所示，我们可以看到 ngRepeat 函数占用了 34.9% 的时间，这意味着 ng-repeat 对页面性能影响比较大。所以，我们需要找到一种更好的方式来处理大量数据。
解决方法
AngularJS 提供了一种解决方案：ng-repeat 的替代方案 —— ng-repeat 的虚拟滚动实现。该实现通过只在屏幕范围内动态创建和删除 DOM 元素，从而减少了页面渲染次数，提高了页面的渲染性能。以下是实现方式：
使用 AngularJS Material
AngularJS Material 提供了一个名为 md-virtual-repeat-container 的指令，它可以将 ng-repeat 变为一个虚拟滚动容器。如下面的示例代码：
<md-virtual-repeat-container md-top-index="topIndex" md-bottom-index="bottomIndex">
<div md-virtual-repeat="item in items" md-on-demand md-item-size="10" class="repeated-item">
{{ item }}
</div>
</md-virtual-repeat-container>在代码中，我们定义 md-virtual-repeat-container 元素作为虚拟滚动容器；md-virtual-repeat 元素包含 ng-repeat 指令并且每个元素都是可重复的， md-item-size 属性用于设置单个元素的高度。
使用 ui-scroll
ui-scroll 是另一个 AngularJS 模块，它实现了一个虚拟滚动容器。要在你的项目中使用 ui-scroll，需要首先在项目中引入该模块：
angular.module('myApp', ['ui.scroll']);然后，在 HTML 中定义虚拟滚动容器：
<div class="wrapper"
ui-scroll-viewport
ui-scroll="item in datasource"
ui-scroll-throttle="50"
ui-scroll-resize="true"
class="bottom">
{{item}}
</div>在代码中，我们定义了一个包裹容器，并给它添加了 ui-scroll-viewport 属性，从而使该容器成为虚拟滚动容器，ui-scroll 属性定义了迭代器的名称和所使用的数据 datasource。ui-scroll-throttle 用于设置渲染的频率，降低对 CPU 的占用率；ui-scroll-resize 用于在窗口大小发生变化时重新计算容器。
总结
初学者 AngularJS 中，ng-repeat 在处理大量数据时可能会导致性能问题，但是使用虚拟滚动机制可以解决这个问题。我们可以使用 AngularJS Material 或 ui-scroll 模块来实现它。虚拟滚动机制可以有效减少页面渲染计算的次数，提高了页面响应时间和性能，而且对用户的操作行为没有任何影响。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b31fdbadd4f0e0ffc30da0