2

私はGWTを使用して、パフォーマンスが一般的に正しいHTMLアプリケーションを構築しています。

場合によっては、DOMに多くのオブジェクトをロードでき、アプリケーションの速度が低下することがあります。Chrome Developer Tools Profilerを使用して、その時間がどこで費やされたかを確認しました（アプリがコンパイルされると、Chromeで、つまりGWTオーバーヘッドはありません）、getAbsoluteLeft（）/ getBoundingClientRect（）メソッドがこの時間の大部分を消費することは明らかです。

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

DOM内の要素が多いほど、絶対位置の計算に時間がかかる可能性があるため、これは私には理にかなっています。ただし、アプリケーションのサブパートだけが変更されていることがわかっている場合もありますが、これらのメソッドでは絶対位置の計算に時間がかかることがあります。これは、おそらくDOM要素全体を不必要に再チェックするためです。私の質問は、ブラウザ/ JavaScriptに関連する問題であるため、必ずしもGWT指向ではありません。

大規模なDOM要素アプリケーションのGWTgetAbsoluteLeft/ javascript getBoundingClientRect問題を改善するための既知の解決策はありますか？

インターネット上で手がかりは見つかりませんでしたが、次のような解決策について考えました。

  • （これらのメソッドの呼び出し数を減らす:-)..。
  • 絶対位置を取得するためにブラウザーが評価する必要のある要素の数を減らすために、iframeを介してDOMの一部を分離します（ただし、コンポーネントの通信が困難になります...）
  • 同じ考えで、いくつかのcssプロパティ（オーバーフロー、位置？）またはいくつかのhtml要素（iframeなど）があり、ブラウザにdomの全体をスキップするように指示するか、単にブラウザが絶対位置をより速く取得するのを助けます

編集 ：

Chrome TimeLineデバッガーを使用し、DOMに多くの要素があるときに特定のアクションを実行すると、平均的なパフォーマンスが得られます。

  • スタイルの再計算：ほぼゼロ
  • ペイント：ほぼ1ミリ秒
  • レイアウト：約900ms

レイアウトには、getBoundingClientRectメソッドを介して900ミリ秒かかります。このページには、getBoundingClientRect ...を含む、WebKitでレイアウトをトリガーするすべてのメソッドが一覧表示されます。

domにはアクションの影響を受けない要素がたくさんあるので、レイアウトはDOM全体で再計算を行っていると思いますが、 paintはcssプロパティ/ DOMツリーを介してスコープを狭めることができます（firebugのMozAfterPaintEventで確認できます）例）。

レイアウトをトリガーするメソッドをグループ化して呼び出すことを除いて、レイアウトの時間を短縮する方法についての手がかりはありますか？

いくつかの関連記事：

4

2 に答える 2

6

私はついに私の問題を解決しました：getBoundingClientRectは、アプリケーションでレイアウトイベント全体をトリガーしていました。これは、重いCSSルールを何度も通過していました。

実際、レイアウト時間はDOM内の要素の数に正比例しません。あなたは軽いスタイルでそれらの何十万も描くことができ、レイアウトはたった2msしかかかりません。

私の場合、2つのCSSセレクターと数十万のDOM要素に一致する背景画像があり、レイアウト中に膨大な時間を費やしていました。これらのCSSルールを削除するだけで、レイアウト時間を900ミリ秒から2ミリ秒に短縮できます。

于 2012-11-11T21:35:24.400 に答える
-1

あなたの質問に対する最も基本的な答えは、遅延評価とも呼ばれる遅延評価を使用することです。原則として、依存するものが変更された場合にのみ、新しいポジションを評価します。通常、セットアップにはかなりの量のコードが必要ですが、セットアップが完了すると、はるかにクリーンに使用できます。何か（ウィンドウサイズなど）に1つの割り当てを行うと、すべての新しい値が自動的に伝播され、伝播する必要のある値のみが伝播されます。

于 2012-11-05T14:40:46.650 に答える