2011-08-10 6 views
20

ブラウザがリフローしている回数を知るためのWeb開発者機能/ツールはありますか?ブラウザがリフローしている回数を調べるにはどうすればよいですか?

基本的に私はある種のフィードバック/情報を持ちたいと思っています。私はそれがどのようになるのかわからないが、タイムラインを示すある種のパフォーマンスグラフ(GoogleのSpeed Tracerに似ている)なので、突然ブラウザが狂った量のリフローをしているときに調べることができるので、ねえ、ここにボトルネックがある、そこに何かのバグ/悪い実装がある必要があります。

+0

は、Googleで開発者ツールのようなものを探していますChromeやFirebug? Chromeのデベロッパーツールの[タイムライン]タブで、[録画]をクリックして、読み込み/スクリプト/レンダリングに費やされた時間を確認できます。レンダリングのタイムラインは、あなたが探しているものを与えるでしょうか? – arunkumar

+0

@arunkumarそれはやや似ていますが、私はページ全体ではなくただ一つの要素のためにプロファイリングできる必要があります。あなたがファイヤーバグを知っていると言うように、我々は単一の要素を選択し、ただ一つの特定の要素のすべてのスタイルを見ることができますか?その要素が選択されると、残りの要素は無視して、その要素のレンダリングバーを見たいと思います。 – Pacerier

+0

「リフロー」とは、「リダイレクト」を意味します。 –

答えて

12
  1. ChromeとSafariには、ブラウザで行われたすべてのリフローと再描画が表示されるウェブインスペクタのタイムラインタブがあります。
  2. Firefoxには、MozAfterPaintというイベントがあります。ページのどの領域をいつブラウザーで再描画するかを理解するのに役立ちます。 Firebug Paint Events add-onはここで役立ちます。 FireBugコンソールで再描画イベントを表示します。
+0

MozAfterPaintを動作させることができませんでした。 * chrome *の意味を知っていますか?MozAfterPaintイベントは、当面はデフォルトでWebコンテンツに送信されなくなります。しかしそれはまだクロムに送られる。 *出典:https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#MozAfterPaint* – Pacerier

+0

私はタイムラインタブを知っていますが、私が望むのは、単一の要素を選択して、リフローを見ることができることですその特定の要素(もちろんページ全体ではありません)。どのような残念..ペイントイベントアドオンはFireFox 3でしか動作しません – Pacerier

+0

これは可能ですか?私はそれのためのツールを知らないということです。私が見る唯一の可能性は、リフローロギング機能を追加するためにブラウザのコードを変更することです。 – bjornd