网格需要异常多的时间才能变得可见

Question

我们有一个有 50 到 66 列的 Grid。出于某种原因，当我调用grid.setVisible(true) 时，显示网格和刷新内容需要一点时间。事实上，我的老板注意到了这一点，因为即使是顶部的蓝线也需要等待 5 秒以上，更不用说完整显示 Grid。我们拥有的列越少，它就越快。作为比较，我有另一个Grid，它有 23 列是瞬时的，速度如此之快，我们甚至看不到顶部的蓝线。与 33 列的 Grid 相同。所以我的问题是：如何提高grid.setVisible(true) 的性能？即使尽早在顶部显示蓝线也会有所帮助。

尽早显示蓝线会有所帮助，但理想情况下，我们会改善用户体验，以某种方式提高性能。因此，任何想法都会受到赞赏。

可以在here 找到一个更快显示蓝线的想法，我一定会尝试的。但最终我认为提高性能会更好，这是我的问题。

注意：我知道这完全是在前端（Vaadin 代码），因为它甚至发生在我在 Eclipse 中进行测试时，它根本不与数据库或 Web 服务对话，只是从 XML 加载假静态数据文件。此外，它不是获取新数据或将新数据加载到Grid，它只是调用grid.setVisible(true)。

注意：顶部的蓝线是正常的 Vaadin 7 加载数据线，根本不是自定义代码。我什至不知道如何控制那条蓝线，从我的角度来看，它是完全自动的。据我所知，它通常在服务器向浏览器发送信息时显示。

在旧 Vaadin 论坛上，我们也有 this。我完全忘记了。他们的@Olli Tietäväinen 说不要做“setVisible”，而是使用 CSS。不过，也许其他人有更好的主意。

Answer 1

默认情况下，在 Vaadin 7 和 Vaadin 8 中，Grid 使用标题和第一可见数据行的快照自动计算列宽。这是 O(n * m) 过程，其中 n 是列数和 m 可见行数。随着列数的增加，该过程需要越来越多的时间。当您有很多列时，使网格渲染更快的最佳方法是使用 Grid.Column#setWidth(double) 使用预定义的列宽。

自动列宽计算将跳过具有预定义宽度的列，从而大大加快处理速度。此外，请确认您使用的是 Vaadin 7.7.17，因为最新版本中包含性能改进补丁。请参阅下面的比较表。

如果你想使用 css 隐藏 Grid，只需执行此操作即可切换类名

grid.addStyleName("grid-hidden");

删除

grid.removeStyleName("grid-hidden");

并在您的主题 scss 文件中添加以下内容。

.grid-hidden {
  display: none;
}