3

我们正在使用 GXT 开发一个相当复杂的系统。虽然在 FF 上一切正常，但 IE（尤其是 IE6）却是另一回事（在浏览器呈现页面之前查看超过 10 秒）。

我知道主要原因之一是 DOM 操作，这在 IE6 下是一场灾难（请参阅http://www.quirksmode.org/dom/innerhtml.html）。

这可以被认为是前端 Javascript 框架（即 GWT）的一般问题，但是执行相同功能证明的简单代码（见下文）。事实上，在 IE6 下 - getSomeGWT() 需要 400 毫秒，而 getSomeGXT() 需要 4 秒。这是一个 x10 的因素，它对用户体验产生了巨大的影响！！！！

private HorizontalPanel getSomeGWT() {
        HorizontalPanel pointsLogoPanel = new HorizontalPanel();
        for (int i=0; i<350; i++) {
            HorizontalPanel innerContainer = new HorizontalPanel();
            innerContainer.add(new Label("some GWT text"));
            pointsLogoPanel.add(innerContainer);
        }
        return pointsLogoPanel;
    }

    private LayoutContainer getSomeGXT() {
        LayoutContainer pointsLogoPanel = new LayoutContainer();
        pointsLogoPanel.setLayoutOnChange(true);
        for (int i=0; i<350; i++) {
            LayoutContainer innerContainer = new LayoutContainer();
            innerContainer.add(new Text("just some text"));
            pointsLogoPanel.add(innerContainer);
        }
        return pointsLogoPanel;
    }

因此，要解决/缓解这个问题，我们需要 - a。减少 DOM 操作的次数；或 b。用 innerHTML 替换它们。

AFAIK，（a）只是使用 GXT 的副作用，（b）仅适用于 GXT 尚不支持的 UiBinder。

有任何想法吗？

提前致谢！

4

2 回答 2

0

我怀疑它与以下内容有关：

pointsLogoPanel.setLayoutOnChange(true);

这将强制为每个附加组件调用布局，并可能导致您看到的差异。

于 2011-05-25T12:39:05.983 回答
-1

GXT 布局容器更强大，但也需要付出代价。它们可能非常强大，尤其是在使用 RowLayout 等布局时。

我的第一个问题是，您希望这些嵌套容器具备哪些功能？动态调整大小，高级调整大小选项/比例？还是 GWT 容器或纯 HTML 容器就足够了？

如果您决定使用 GXT 布局容器，您应该首先禁用 layoutOnChange 选项。因为启用该选项会导致每次将子项添加到容器时进行额外处理，并可能使浏览器在该时间点重新呈现。

因此，在禁用 layoutOnChange 的情况下，只需在 for 循环后调用 pointsLogoPanel 上的 layout() 即可。尽管您甚至还没有将它添加到父容器中，但是一旦添加了 pointsLogoPanel，您就可以简单地在父容器上调用 layout() 。这不会解决所有的性能问题，但它可能会有很长的路要走。

于 2012-07-04T23:11:09.987 回答