如何使用 Angular 加速浏览器对大量数据的渲染？
How to speed up browser rendering for large amounts of data using Angular?
好的，我有大约 20k 条记录和 29 列纯文本数据，我从后端获取到 Angular 应用程序。
一旦我从服务器获取数据（大约需要 1 秒），我将它绑定到组件中的一个字段，然后使用 HTML table 结合 *ngFor 来显示所有数据.
Chrome一次渲染所有内容大约需要 58 秒，脚本时间约为 10 秒。
从我点击 link 到组件 没有 [=22] 的那一刻起，我的公司能够在 2.5 秒内在页面中看到结果是一个很大的要求=] 使用分页或无限滚动。
要实现这样的性能，我有哪些选择？
由于对应用程序和模型的了解有限，很难判断，但我看到了 2 个选项（您可以选择一个或两个）：
- 延迟加载分页 table 内容。我不知道您使用的是哪个（如果有的话）UI 框架，但您可以检查它在 NgPrime 中的处理方式，例如 Lazy table
编辑：可以通过几种方式实现：
第一：如果后端有问题（在这种情况下不是），您可以只从后端请求数据片段并使用像 NgPrime 这样的库来处理它
第二：如果你不使用任何框架，你可以使用类似虚拟滚动的东西 Virtual scroll
- 通过后端发送的瘦身模型。如果大量对象有一些嵌套对象作为道具，它会显着降低下载和渲染速度。您可以决定是否真的需要所有传输的数据，而不是使用嵌套对象，而是制作一些轻型对象。
另请查看开发工具并分析加载性能以获取更多信息：
Find bottlenecks in chrome dev tools
编辑：
随着评论提供的更多数据，我会使用虚拟滚动或类似机制（它动态加载和呈现 html）。
好的，我有大约 20k 条记录和 29 列纯文本数据，我从后端获取到 Angular 应用程序。
一旦我从服务器获取数据（大约需要 1 秒），我将它绑定到组件中的一个字段，然后使用 HTML table 结合 *ngFor 来显示所有数据.
Chrome一次渲染所有内容大约需要 58 秒，脚本时间约为 10 秒。
从我点击 link 到组件 没有 [=22] 的那一刻起，我的公司能够在 2.5 秒内在页面中看到结果是一个很大的要求=] 使用分页或无限滚动。
要实现这样的性能，我有哪些选择？
由于对应用程序和模型的了解有限，很难判断，但我看到了 2 个选项（您可以选择一个或两个）：
- 延迟加载分页 table 内容。我不知道您使用的是哪个（如果有的话）UI 框架，但您可以检查它在 NgPrime 中的处理方式，例如 Lazy table
编辑：可以通过几种方式实现： 第一：如果后端有问题（在这种情况下不是），您可以只从后端请求数据片段并使用像 NgPrime 这样的库来处理它 第二：如果你不使用任何框架，你可以使用类似虚拟滚动的东西 Virtual scroll
- 通过后端发送的瘦身模型。如果大量对象有一些嵌套对象作为道具，它会显着降低下载和渲染速度。您可以决定是否真的需要所有传输的数据，而不是使用嵌套对象，而是制作一些轻型对象。
另请查看开发工具并分析加载性能以获取更多信息： Find bottlenecks in chrome dev tools
编辑： 随着评论提供的更多数据，我会使用虚拟滚动或类似机制（它动态加载和呈现 html）。