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

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

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

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

对于我的公司来说，这是一个很大的要求，从我点击组件链接的那一刻起，在2.5秒内就可以看到页面中的结果，而不必使用分页或无限滚动

---

我有哪些选项可以实现这样的性能？

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

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

编辑：可以通过以下几种方式实现： 第一：如果后端出现问题（在本例中不是这样），您可以只请求后端的数据片段，并使用诸如NgPrime之类的库来处理它 第二：如果你不使用任何框架，你可以使用类似虚拟滚动的东西

• 通过后端发送的精简模型。如果大型对象集合中有一些嵌套对象作为道具，则会显著降低下载和渲染速度。您可以决定是否确实需要传输的所有数据，而不是使用嵌套对象，并制作一些轻对象

还可以查看开发工具并分析加载性能，以获取更多信息：

编辑：

---

如果评论中提供了更多数据，我会使用虚拟滚动或类似的机制（动态加载和呈现html）。

谢谢您的回答。您能告诉我延迟加载分页表内容是什么意思吗？。幕后到底发生了什么？对于您提供的第二个选项，通过网络发送的对象只包含一个级别。因此，没有任何嵌套对象。在服务器上使用ResponseCompression后，使用HTTP将数据从服务器传输到客户端所需的时间约为1秒。因此，造成延迟的实际开销是浏览器的渲染和Angular的脚本。目前，我们正在将性能与执行相同功能的桌面应用程序进行比较。在桌面应用程序上显示所有数据（带有缩略图）大约需要2秒钟。我们希望在网络上获得同样的结果。这可能吗？谢谢你的更新。我将把它标记为一个答案