5

有没有办法使用从数据存储区加载的数据生成的 GWT 的 UI 元素来加速页面的填充？我可以避免在页面加载时进行不必要的 RPC 调用吗？

有关我遇到的问题的更多详细信息：有一个页面，我在该页面上生成了一个表，其中包含从数据存储区加载的实体列表的名称和按钮。该页面有一个入口点，在其 onModuleLoad() 中我执行以下操作：

final FlexTable table = new FlexTable();

rpcAsyncService.getAllCandidates(new AsyncCallback<List<Candidate>>() {
    public void onSuccess(List<Candidate> candidates) {
       int row = 0;
       for (Candidate person : candidates) {
          table.setText(row, 0, person.getName());
          table.setWidget(row, 1, new ToggleButton("Yes"));
          table.setWidget(row, 2, new ToggleButton("No"));
          row++;
       }
    }
    ...
});

这可行，但需要 30 多秒才能加载包含 300 个候选人的按钮的页面。这是无法接受的。

该应用程序在 Google App Engine 上运行并使用应用程序引擎的数据存储区。

4

4 回答 4

8

您可以做很多事情，我将按顺序列出它们，以便给您带来最大的影响。

  1. FlexTable不适用于 300 行。由于您的表格非常简单，您应该考虑手动生成 HTML，然后使用简单的 HTML 小部件。此外，300 行信息量很大- 考虑使用分页。DynaTable示例应用程序向您展示了如何执行此操作。
  2. 看起来您每页使用一个 GWT 模块。那是 GWT 的错误方法。加载 GWT 模块有一些不小的成本。要理解我的意思，请将 gmail 上的浏览​​器刷新与 gmail 提供的刷新链接进行比较。当您网站中的每个页面都有一个不同的 GWT 模块时，这与您支付的成本相同。
  3. 如果跨视图需要候选列表，您可以将其与 HTML 作为 JSON 对象一起发送，然后使用 GWT 中的Dictionary 类来读取它。这可以节省您正在进行的 RPC 调用。仅当数据将在多个视图/屏幕上有用时才建议使用此方法（例如登录的用户信息）
  4. 检查您的 RPC 方法调用需要多长时间。您可以在 GWT中启用统计信息来确定您的应用程序在哪里花费时间。
  5. 您还可以运行Speed Tracer来确定瓶颈所在。这是最后一个，因为很明显 FlexTable 正在执行大量的 DOM 操作。一般来说，如果您不知道从哪里开始，Speed Tracer 是一个很棒的工具。
于 2010-05-02T17:23:02.860 回答
1

您的问题是，每次您向 FlexTable 添加内容时，它都必须重新渲染整个页面并重新绘制。尝试创建一个新的 FlexTable，填充它，当它完全填充时，摆脱旧的并把新的放在那里。

于 2010-05-02T21:00:11.573 回答
1

这里重要的是您如何检索未显示的候选人列表。30 秒非常高，不太可能仅是由于数据存储。

您是否尝试过使用 appstats 来分析您的应用？

于 2010-05-02T16:30:14.567 回答
1

就像sri 建议的那样- 分页是最简单的并且（我认为）最好的解决方案（以及切换到Grid或只是<table>）。但是，如果您出于某种原因想要一次显示/渲染多行，GWT Incubator 项目有一个不错的 wiki 页面关于它 - 以及一些基准显示FlexTable在大行数时是多么糟糕。也看看他们的其他桌子；）

于 2010-05-02T20:46:38.560 回答