已部署 GWT 应用程序的首次加载问题？

Question

我部署了我的应用，但遇到了这个问题。

第一次加载应用程序时，它会显示 5-7 秒的空白页面，这对于良好的用户体验来说相当长。但是在那之后，页面显示得非常快，因为它被缓存了。

问题是当我在 Adword 中宣传我的网站时。当很多人第一次访问我的网站时，如果它长时间显示空白页面，他们可能会感到不耐烦。

我认为解决方案是制作一个加载指示器来指示用户页面正在加载。

实际上我确实在onModuleLoad 方法中加载了指标

public class MyProject implements EntryPoint {

private final ClientGinjector ginjector = GWT.create(ClientGinjector.class);

@Override
public void onModuleLoad() {
    // This is required for Gwt-Platform proxy's generator
    DelayedBindRegistry.bind(ginjector);

    ginjector.getPlaceManager().revealCurrentPlace();
    DOM.removeChild(RootPanel.getBodyElement(), DOM.getElementById("loading"));

}

}

在 MyProject.html 中

<html>
     <head>......</head>
     <body>
        <div id="loading">
           Loading<BR/>
           <img src="../images/loading.gif" />
        </div>
        <iframe.......></iframe>  
      ......
      </body>
</html>

但是，<div id="loading"> 仅在加载所有 javascript 文件后才有效。它在用户刚开始访问该网站时无法正常工作，这就是为什么用户会在很长一段时间内看到一个空白页面。

我不确定 GWT 应用是否适合在 Google 中投放广告。但是我的页面通过了 Adword 人的广告审核，所以这意味着页面必须最终可见，否则 Adword 人会拒绝我的页面。

你能找到解决办法吗？

我们可以把加载指示器放在服务器端吗？

Answer 1

我对这个问题的解决方案是不使用 Javascript 作为加载器。

Vadim 有一些优点，但其他使用代码拆分。

1. 使用纯 CSS 加载器。
2. 将 gwt javascript 的加载移动到页面末尾。这样，加载器会在加载 javascript 之前呈现。
3. 将对象插入 GWT 的 dom 后移除加载指示器。

以下是一些示例 css 加载器：

http://tobiasahlin.com/spinkit/

所以你的页面应该是这样的：

<html>
 <head>
    <link rel="stylesheet" type="text/css" href="loading.css">
 </head>
 <body>
    <div id="loading">
    </div>
    <iframe.......></iframe>  
  ......
    <script src="my module script.js"/>
  </body>
</html>

虽然 GWT 文档实际上说，我相信，做相反的事情。如果我没记错的话，它会说“不需要将脚本放在底部并减慢脚本的加载速度”。但是，如果脚本需要很长时间才能加载，那么它在页面中的位置并不重要，只要它是让您的页面反应最快的位置即可。

向 DOM 中删除和添加内容可能如下所示：

  Widget mainWidget = ...
  // add all widgets to mainWidget.
  RootPanel.get().insert(mainWidget,0);  //This adds the main widget below anything else.

  //remove the pre loading indicator

  Element e = Document.get().getElementById("loading");
  if (e != null)
  {
     e.removeFromParent();
  }

Answer 2

我认为您需要一个复杂的解决方案来加速您的应用程序。这是一个简单的可能检查清单：

1) 用纯JS实现在外部JS文件中的加载。在加载 .nocache.js 之前，您应该从该文件加载并启动代码。

2) 确保您使用混淆编译模式来最小化 gwt 模块的初始大小 (-style OBF)

3) 确保您使用的是<add-linker name="xsiframe" />。它会加快 IE 中的解析时间。

4) 确保您使用code splitting 以最小化您的 gwt 模块的初始下载部分。使用编译报告（-compileReport 跟踪更改）。

如果您使用requestFactory，您可能还对 requestFactory 优化感兴趣。