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有一些好处，但其他人使用代码分割。

使用纯CSS加载程序。
将gwt javascript的加载移动到页面末尾。这样，加载器就会在加载javascript之前呈现。
将对象插入到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文档实际上说，我相信，做相反的事情。它说的是“＃34;它不需要将脚本置于底部并减慢脚本的加载速度。”如果我没记错的话。但是，如果脚本需要很长时间才能加载，那么它在页面中的位置并不重要，只要它能让您的页面反应最快。

删除和添加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优化感兴趣。

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

2 个答案: