记一次 AngularJS ng-repeat 指令导致 SPA 挂掉的出奇制胜解决方法-JavaScript中文网-JavaScript教程资源分享门户

背景

最近在项目中遇到一个奇怪的问题，使用 AngularJS 的 ng-repeat 指令渲染一个大量的列表数据时，页面会卡住并且无法滚动，看起来像是页面挂掉了。

经过排查发现，这个问题只在 Chrome 浏览器中出现，而在 Firefox 和 Edge 浏览器中没有问题。在 Chrome 浏览器中使用开发者工具发现，CPU 占用率和内存使用率都非常高，但是没有任何异常的警告或错误信息。

排查

首先，我们尝试减少列表数据的数量，发现当列表数据少于某一个数量时，这个问题就不会出现了。通过实验发现，这个数量大约是 1000 条左右。

其次，我们尝试在 ng-repeat 指令中添加 track by 语句来优化性能，但是这个方法也没有起到太大的效果。

最后，我们找到了一个出奇制胜的解决方法。

解决

这个解决方法是使用虚拟滚动（Virtual Scrolling）技术来优化列表渲染性能。

虚拟滚动技术的原理很简单：只渲染可见部分的数据，而不是渲染全部数据。当用户滚动页面时，再渲染新的部分数据。这样做可以大幅减少页面的渲染时间和内存占用，从而提高页面的性能。

在 AngularJS 中使用虚拟滚动技术，可以使用 ngx-virtual-scroll 库来实现。下面是一个示例代码：

<ul class="list-group" ngxVirtualScroll [items]="items" [parentScroll]="window">
  <li class="list-group-item" *virtualItem="let item">
    {{item}}
  </li>
</ul>

在这个例子中，我们使用了 ngx-virtual-scroll 库提供的 ngxVirtualScroll 指令，并且设置了 items 属性来指定列表数据。同时，我们使用了 *virtualItem 指令来指定每一个列表项的内容。

这样做之后，页面的性能得到了显著的优化，这个问题也得到了完美的解决。

总结

通过这个问题的排查和解决，我们可以得到一些启示：

AngularJS 的 ng-repeat 指令在渲染大量数据时性能较差，需要使用虚拟滚动技术来优化性能。
使用虚拟滚动技术可以大幅减少页面的渲染时间和内存占用，从而提高页面的性能。
ngx-virtual-scroll 是一个优秀的虚拟滚动库，在 AngularJS 中使用非常方便。

希望这个经验能够对广大前端工程师有所帮助，谢谢！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6477e6d1968c7c53b043664c