html - Angular 的 StencilJS 性能问题

Question

我的团队在我们的应用程序中混合使用了 Angular 组件和 StencilJS 组件。我们的一些页面显示了一个项目列表（使用传统的 Angular *ngFor），列表长度可能从几到一千或更多不等。

所需的行为是，在导航到页面时，出现一个忙等待微调器以指示“系统正在处理”。然后数据显示（一次或一次全部显示 - 没关系），然后微调器应该消失，如下面的时序图所示：

在实践中，对于大量的项目（比如几百个或更多），渲染看起来像这样：

换句话说，微调器出现然后消失，并且在相当长的几秒后（最多 25 秒，与列表长度成正比）数据最终呈现！

我已将其与使用 StencilJS 组件创建类似 HTML 表格的实体隔离开来：将其换成 (a) 纯 HTML<table>或 (b) 等效 Angular 组件<my-table>在第一个图表中显示所需的时间。

几点注意事项：

• 想要除了纯 HTML 之外的其他东西的原因<table>是可以将如此复杂的 CSS 封装到实体中。
• 每个表格行并不是特别复杂：可能只有 3 到 5 列只包含文本。

这是否意味着我们错误地使用了 StencilJS，或者使用它确实存在这样的性能损失？

标签： htmlangularstenciljs