Problèmes de performances GXT

Question

Nous travaillons sur un système plutôt complexe utilisant GXT. Alors que tout fonctionne bien sur FF, IE (surtout IE6) est une histoire différente (en regardant plus de 10 secondes jusqu'à ce que le navigateur rend la page).

Je comprends que l'une des principales raisons est la manipulation DOM qui est un désastre sous IE6 (Voir http://www.quirksmode.org/dom/innerhtml.html). Ceci peut être considéré comme un problème générique d'un framework Javascript frontal (c'est-à-dire GWT) mais un code simple (voir ci-dessous) qui exécute les mêmes preuves de fonctionnalité autrement. En fait, sous IE6 - getSomeGWT() prend 400ms alors que getSomeGXT() prend 4 secondes. C'est un facteur x10 qui en fait un énorme différent pour l'expérience utilisateur !!!

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

Donc, pour résoudre/atténuer le problème il faudrait - a. Réduire le nombre de manipulations DOM; ou b. Remplacez-les par innerHTML. AFAIK, (a) est simplement un effet secondaire de l'utilisation de GXT et (b) n'est possible qu'avec UiBinder qui n'est pas encore supporté par GXT.

Des idées?

Merci d'avance!

Answer 1

Je soupçonne qu'il a quelque chose à voir avec:

pointsLogoPanel.setLayoutOnChange(true); 

Cela renforcera l'appel de la mise en page pour chaque composant supplémentaire et peut être à l'origine des différences que vous voyez.

Answer 2

Les conteneurs de disposition GXT sont plus puissants, mais ont un coût. Ils peuvent être assez puissants, surtout lorsque vous utilisez des mises en page comme RowLayout, etc.

Ma première question serait, quelles capacités voulez-vous pour ces conteneurs imbriqués? taille dynamique, options de redimensionnement avancées/dosage? Ou est-ce que les conteneurs GWT ou les conteneurs HTML simples suffisent?

Si vous décidez d'utiliser des conteneurs de mise en page GXT, commencez par désactiver l'option layoutOnChange. L'activation de cette option entraîne un traitement supplémentaire à chaque fois que vous ajoutez un enfant au conteneur et permet au navigateur de s'afficher de nouveau à ce moment précis. Donc, avec layoutOnChange désactivé, appelez simplement layout() sur votre pointsLogoPanel après la boucle for. Bien que vous ne l'ayez pas encore ajouté à un conteneur parent, vous pouvez simplement appeler layout() sur le conteneur parent une fois que PointsLogoPanel est ajouté. Cela ne résoudra pas tous les problèmes de performances, mais cela ira probablement un long chemin.