如何使用 Angular 加快浏览器渲染大量数据的速度？

Question

好的，我有大约 20k 条记录和 29 列纯文本数据，我从后端获取到 Angular 应用程序。

从服务器获取数据后（大约需要 1 秒），我将其绑定到组件中的字段，然后使用 HTML 表格和 *ngFor 组合来显示所有数据。

Chrome 一次渲染所有内容大约需要 58 秒，脚本时间大约是 10 秒。

从我点击组件链接的那一刻起，不使用分页或无限滚动，我的公司能够在 2.5 秒内看到页面中的结果，这是我公司的一项重大要求。

我有哪些选择来实现这样的性能？

Answer 1

由于对应用程序和模型的了解有限，很难说，但我看到了 2 个选项（您可以选择一个或两个）：

• 延迟加载分页表格内容。我不知道您使用的是哪个（如果有的话）UI 框架，但您可以检查它在 NgPrime 中的处理方式，例如 Lazy table

编辑：可以通过以下几种方式实现： 首先：如果后端有问题（在这种情况下不是），您可以只从后端请求数据片段并使用 NgPrime 之类的库来处理它 第二：如果你不使用任何框架，你可以使用虚拟滚动Virtual scroll

• 通过后端发送的瘦身模型。如果大型对象集合有一些嵌套对象作为道具，它会显着减慢下载和渲染速度。您可以决定是否真的需要所有被传输的数据，而不是嵌套对象，而是创建一些轻对象。

还可以查看开发工具并分析加载性能以获取更多信息： Find bottlenecks in chrome dev tools

编辑： 随着 cmets 提供的更多数据，我将使用虚拟滚动或类似机制（它动态加载和呈现 html）。