与 Vue.js + 基本 html 表(2 秒)相比,PrimeVue DataTable 加载速度非常慢,有 2000 多条记录(15 秒)

问题描述 投票:0回答:1

我遇到了 PrimeVue 数据表的性能问题,并且需要一些帮助来了解如何找到问题并修复它。如果有 2000 多条记录,DataTable 加载速度非常慢,最少 5 秒,有时 20 秒或更多秒。

使用基本的 Vue.js 组件和标准 html 表,相同的数据集可在 2 秒内加载。

我知道正常情况下有 VirtualScroller 和 Pagination,但在我们的特定用例中,我们需要让表在没有这些的情况下按原样工作。由于与基本数据表的比较,我确定问题出在 PrimeVue 代码中。

我有什么想法可以开始修复它吗?这是使用 PrimeVue 的一个大问题,我们真的很想弄清楚这一点,因为我们喜欢我们已经购买的 PrimeVue 组件套件的其余部分和布局模板。

显示 PrimeVue DataTable 加载时间问题的代码示例:

代码示例显示使用基本 HTML 表格组件的加载时间要快得多:

我什至很乐意尝试通过拉取请求诊断并帮助解决 PrimeTek 的问题,但需要一些帮助来找到从哪里开始寻找缓慢的原因。

javascript vue.js vuejs3 primevue
1个回答
0
投票

PrimeVue 组件(如 DataTable)在设计时考虑了广泛的功能和可配置性 虽然这使得 PrimeVue 极其灵活,但它也会降低性能,尤其是在同时处理 2000 条记录等大型数据集时 原因如下:

功能丰富的组件:PrimeVue 旨在提供众多开箱即用的功能,例如排序、过滤、分页、行选择和动态列渲染 这些功能中的每一个都需要对表中的每一行和单元格执行额外的逻辑 这意味着即使您没有主动使用某些功能,PrimeVue 仍然会执行检查以查看是否需要应用它们

可配置性的开销:PrimeVue 组件被设计为可扩展和可定制 为了实现这种灵活性,组件采用更复杂的内部结构编写 对于每一行,PrimeVue 可能会在后台运行多个操作,以确保考虑到所有可能的配置,例如检查是否启用了排序、过滤或其他高级功能 这会增加处理负载

检查未使用的功能:即使您没有使用某些功能,PrimeVue 仍然需要检查并确保应用或忽略这些功能 例如,在渲染 DataTable 时,PrimeVue 可能会在内部检查您是否需要调整列大小、行分组或虚拟滚动 - 即使这些功能未打开 每项检查都会增加一点处理时间

渲染额外标记:PrimeVue 可能会在 DOM 中插入额外标记或注释(例如

<!---->
)以处理 v-if 条件和其他动态渲染功能 虽然这些额外的节点本身无害,但它们表明 Vue 正在幕后管理额外的逻辑,从而在处理数千条记录时进一步导致渲染速度变慢

与基本 HTML/Vue 的比较:当使用基本 HTML 或更简单的 Vue 设置时,您只生成每行绝对必需的内容 - 通常只是数据和最少的逻辑 另一方面,PrimeVue 具有针对每一行运行的多层内置功能,随着记录数量的增长,这会显着减慢速度

总而言之,与更简单的手动编码解决方案相比,PrimeVue 广泛的功能集使其速度慢得多,尤其是在处理大型数据集时 每个功能检查和内部操作都会导致更重的处理负载,这就是为什么您在处理数千条记录时应该考虑使用分页或其他性能优化

© www.soinside.com 2019 - 2024. All rights reserved.