Używam GWT do budowania aplikacji HTML, w której wydajność jest ogólnie poprawna.

Czasami może załadować wiele obiektów w DOM i aplikacja staje się wolna. Użyłem narzędzia programistycznego Chrome Developer Tools, aby sprawdzić, gdzie spędzono ten czas (w Chrome po skompilowaniu aplikacji, tj. Bez narzutu GWT) i jasne jest, że metodygetAbsoluteLeft () / getBoundingClientRect () spożywać większą część tego czasu.

Oto implementacja zastosowana w 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);
}

Ma to dla mnie sens, ponieważ im więcej elementów w DOM, tym więcej czasu zajmuje obliczenie pozycji bezwzględnych.Jest to jednak frustrujące, ponieważ czasami wiesz, że zmieniła się tylko część Twojej aplikacji, podczas gdy metody te będą jeszcze wymagały czasu, aby obliczyć pozycjonowanie bezwzględne, prawdopodobnie dlatego, że niepotrzebnie sprawdzają całą grupę elementów DOM. Moje pytanie niekoniecznie dotyczy GWT, ponieważ jest to problem związany z przeglądarką / javascript:

Czy istnieje jakieś znane rozwiązanie, które poprawiłoby GWT getAbsoluteLeft / javascript getBoundingClientRect dla dużych aplikacji elementów DOM?

Nie znalazłem żadnych wskazówek w Internecie, ale pomyślałem o rozwiązaniu takim jak:

(zmniejszenie liczby wywołań tych metod :-) ...odizoluj część DOM poprzez iframe, aby zmniejszyć liczbę elementów, przeglądarka musi ocenić, aby uzyskać pozycję bezwzględną (chociaż utrudniałoby to komunikowanie się elementów ...)w tym samym pomyśle może istnieć pewna właściwość css (przepełnienie, pozycja?) lub jakiś element html (np. iframe), który mówi przeglądarce, aby pominęła całą część domeny lub po prostu pomogła przeglądarce uzyskać szybszą pozycję

EDYTOWAĆ :

Korzystając z debugera Chrome TimeLine i wykonując określoną akcję, podczas gdy w DOM jest wiele elementów, mam średnią wydajność:

Przelicz styl: prawie zeroFarba: prawie 1 msUkład: prawie 900ms

Układ zajmuje 900ms za pomocą metody getBoundingClientRect. Ta lista stronwszystkie metody uruchamiające układ w WebKit, w tym getBoundingClientRect ...

Zakładam, że skoro mam wiele elementów w domenie, na które moje działanie nie ma wpływuukład robi ponowne obliczanie w całym DOMfarba jest w stanie poprzez właściwość css / drzewo DOM zawęzić zakres (widzę to na przykład w MozAfterPaintEvent w firebug).

Z wyjątkiem grupowania i wywoływania mniej metod, które wyzwalają układ,jakieś wskazówki dotyczące skrócenia czasu projektowania?

Niektóre powiązane artykuły:

Minimalizacja przepływu przeglądarki