GXT 性能问题

Question

我们正在使用 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;
    }

因此，要解决/缓解这一问题，需要- 一个。减少 DOM 操作次数；或者 b.将它们替换为innerHTML。

AFAIK，(a) 只是使用 GXT 的副作用，(b) 只能通过 GXT 尚不支持的 UiBinder 实现。

有什么想法吗？

提前致谢！

Answer 1

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

pointsLogoPanel.setLayoutOnChange(true);

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

Answer 2

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

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

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

因此，在禁用layoutOnChange的情况下，只需在for循环之后在pointsLogoPanel上调用layout()即可。不过，由于您还没有将其添加到父容器中，因此在添加pointsLogoPanel 后，您可以简单地在父容器上调用layout() 。这并不能解决所有的性能问题，但可能会大有帮助。