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;
    }

因此，要解决/缓解人们需要的问题 - 一个。减少DOM操作的数量;要么湾用innerHTML替换它们。

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

有什么想法吗？

提前致谢！

Answer 1

我怀疑它与某些事情有关：

pointsLogoPanel.setLayoutOnChange(true);

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

Answer 2

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

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

如果您决定使用GXT Layout Containers，则应首先禁用layoutOnChange选项。由于启用该选项会在每次向容器中添加子项时导致其他处理，并可能使浏览器在该时间点重新呈现。

因此，禁用layoutOnChange后，只需在for循环后调用pointsLogoPanel上的layout（）。虽然您还没有将它添加到父容器中，但只需添加pointsLogoPanel就可以在父容器上调用layout（）。这不会解决所有的性能问题，但它可能会有很长的路要走。

GXT性能问题

2 个答案: