Ich verwende GWT, um eine HTML-Anwendung zu erstellen, bei der die Leistung im Allgemeinen korrekt ist.

Manchmal können viele Objekte in das DOM geladen werden, und die Anwendung wird langsam. Ich habe Chrome Developer Tools Profiler verwendet, um zu sehen, wo diese Zeit verbracht wurde (unter Chrome, sobald die App kompiliert wurde, dh ohne GWT-Overhead) und es ist klar, dass die MethodengetAbsoluteLeft () / getBoundingClientRect () verbrauchen den größten Teil dieser Zeit.

Hier ist die Implementierung unter Chrome (com.google.gwt.dom.client.DOMImplStandardBase):

private static native ClientRect getBoundingClientRect(Element element) /*-{
  return element.getBoundingClientRect && element.getBoundingClientRect();
}-*/;

@Override
public int getAbsoluteLeft(Element elem) {
  ClientRect rect = getBoundingClientRect(elem);
  return rect != null ? rect.getLeft()
     + elem.getOwnerDocument().getBody().getScrollLeft()
     : getAbsoluteLeftUsingOffsets(elem);
}

Dies ist für mich sinnvoll, da die Berechnung der absoluten Positionen umso länger dauern kann, je mehr Elemente im DOM enthalten sind.Es ist jedoch frustrierend, weil Sie manchmal wissen, dass sich nur ein Teil Ihrer Anwendung geändert hat, während die Berechnung der absoluten Positionierung für diese Methoden noch einige Zeit in Anspruch nimmt. Dies liegt wahrscheinlich daran, dass eine ganze Reihe von DOM-Elementen unnötigerweise erneut überprüft werden. Meine Frage ist nicht unbedingt GWT-orientiert, da es sich um ein Browser- / Javascript-Problem handelt:

Gibt es eine bekannte Lösung zur Verbesserung des GWT-Problems getAbsoluteLeft / javascript getBoundingClientRect für Anwendungen mit großen DOM-Elementen?

Ich habe keine Hinweise im Internet gefunden, aber ich dachte über eine Lösung wie:

(Reduzierung der Anzahl der Aufrufe für diese Methoden :-) ...Isolieren Sie einen Teil des DOM durch Iframe, um die Anzahl der Elemente zu verringern, die der Browser auswerten muss, um eine absolute Position zu erhalten (obwohl die Kommunikation mit Komponenten schwierig wäre ...).In der gleichen Idee könnte es eine CSS-Eigenschaft (Überlauf, Position?) oder ein HTML-Element (wie iframe) geben, das den Browser anweist, einen ganzen Teil des Doms zu überspringen oder dem Browser einfach zu helfen, die absolute Position schneller zu ermitteln

EDIT:

Wenn ich den Chrome TimeLine-Debugger verwende und eine bestimmte Aktion durchführe, während viele Elemente im DOM vorhanden sind, habe ich die durchschnittliche Leistung:

Berechnen Sie den Stil neu: fast NullLack: fast 1 msLayout: fast 900 ms

Das Layout dauert 900 ms mit der Methode getBoundingClientRect. Diese SeitenlisteAlle Methoden, die das Layout in WebKit auslösen, einschließlich getBoundingClientRect ...

Da ich viele Elemente im Dom habe, die von meiner Aktion nicht betroffen sind, gehe ich davon ausLayout führt im gesamten DOM eine Neuberechnung durchFarbe kann über die CSS-Eigenschaft / den DOM-Baum seinen Bereich einschränken (ich kann ihn zum Beispiel über MozAfterPaintEvent in Firebug sehen).

Außer Gruppieren und Aufrufen weniger der Methoden, die das Layout auslösen,Gibt es Hinweise, wie Sie die Zeit für das Layout verkürzen können?

Einige verwandte Artikel:

Minimierung des Browser-Reflow