GXT性能问题

Question

我们正在使用GXT开发一个相当复杂的系统。虽然在FF上一切都很好，但IE (特别是IE6)却是另一回事(在浏览器呈现页面之前，需要10秒以上的时间)。

我知道其中一个主要原因是DOM操作，这在IE6 (参见http://www.quirksmode.org/dom/innerhtml.html)下是一场灾难。

这可以被认为是前端Javascript框架(即GWT)的一般问题，但执行相同功能证明的简单代码(见下文)。事实上，在IE6下- getSomeGWT()需要400ms，而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)只有UiBinder才有可能，而GXT还不支持它。

有什么想法吗？

提前感谢！

Answer 1

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

pointsLogoPanel.setLayoutOnChange(true);

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

Answer 2

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

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

如果您确实决定使用GXT布局容器，那么应该从禁用layoutOnChange选项开始。因为每次向容器添加子对象时，启用该选项都会导致额外的处理，并且可能会使浏览器在该时间点重新呈现。

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