PrimeNG Turbo Table 在 IE 11 中的性能缓慢答案

【问题标题】：Slow performance of PrimeNG Turbo Table in IE 11PrimeNG Turbo Table 在 IE 11 中的性能缓慢
【发布时间】：2020-05-21 17:55:27
【问题描述】：

我们使用 PrimeNG 的 Turbo 表和动态列来显示每页 1000 条记录。启用了服务器端分页和排序。这在 Chrome 中运行良好，但在 IE 中在排序、分页或更新所有记录时速度非常慢。一旦服务器响应在约 9 秒内返回，IE 将冻结 2 分钟，然后显示数据。另外，表格使用 ngSwitch 来确定列的内容，例如，有的列显示图标，有的显示文本区域等。

启用 prodMode 有助于显着改善页面加载，这与现在的 Chrome 相当，但是我们在排序、分页和更新记录时仍然存在性能问题。

我们通过移除 ngSwitch 测试了性能，并观察到了轻微的改进 - 减少了 10 秒。但是，我们需要 ngSwitch 功能，因此删除它确实不是一种选择，除非我们可以使用其他替代方法。无论如何，它并不能完全解决我们的问题。

感谢任何帮助！

【问题讨论】：

您是否使用过 F12 开发工具的“性能”选项卡来检查哪个部分会降低 IE 的性能？ IE中的控制台有错误吗？此外，您可以尝试使用virtual scroll。它假装拥有所有物品，但实际上同时只显示一定数量。我认为它会让您的 DOM 保持轻量并具有更快的性能。
IE 每次启动开发工具时都会挂起！另外，我在控制台中看不到任何错误。我确实尝试过使用虚拟滚动，但它不适用于我们的用例。用户需要能够一次选择页面上的全部或部分记录并对其执行操作。为此，我们还提供了 Turbo Table 的上下文菜单功能。

标签： performance internet-explorer-11 angular8 ng-switch primeng-turbotable

【解决方案1】：

IE 可能需要比任何其他最新浏览器更多的时间，尤其是在您需要显示 1000 条记录的情况下，这不是一个小数目。我不知道您的案例是否有可能每次加载更少的记录。如果可能，您可以在 IE 中的加载时间和记录数量之间找到一个平衡点。

没有任何示例代码，我们只能提供一些一般性的建议。在这种情况下，我只能建议您使用F12 developer Performance tools 来分析UI 性能，并使用F12 developer Network tools 来检查请求花费时间。如果开发工具在您的 IE 中无法正常运行，您还可以使用Windows Performance Toolkit 来分析网站性能。

【讨论】：

非常感谢您的帮助！为了让开发工具正常工作，我将记录数减少到 500 条，这让我能够分析性能。似乎所有时间都花在了 DOM 加载事件上，具体来说就是 polyfills-es5.js 中的 globalZoneAwareCallback 函数。此外，Javascript 调用堆栈显示 vendor.js 中的函数“checkAndUpdateView”使用 35% 的 CPU。
在 index.html 中添加了以下内容，但没有帮助：
TurboTable 的性能类似于原生 *ngFor，因为它使用它。 NgFor 拆除整个 DOM 树以进行重复，并重建它以对其数据进行任何可能对 IE 性能造成重大影响的微小更改。给NgFor 一个trackBy 函数允许它只更新需要更改的DOM。其他性能检查可以参考this list。
谢谢@YuZhou。我们的表已经使用了 trackBy 函数，除了组件中的变更检测 onPush 策略。更新一些记录几乎不需要几秒钟。但是，如果我们一次更新所有 1k 条记录，则需要很长时间。我会看看你推荐的清单。
不客气。如果所有必要的事情都已完成，那么我认为这是由于 IE 的限制。毕竟IE和其他现代浏览器使用的引擎不同，速度不如其他现代浏览器。