GXT性能問題

Question

我們正在研究一個使用GXT的相當複雜的系統。儘管FF上的所有功能都很棒，但IE（特別是IE6）卻是另外一回事（瀏覽器呈現頁面之前，瀏覽時間超過10秒）。

據我所知，其中一個主要原因是IE6下的災難性DOM操作（見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操作的數量;或 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（）。這不會解決所有的性能問題，但它可能會有很長的路要走。