web-dev-qa-db-ja.com

Chromeタイムライン-「スタイルの再計算」ログエントリの原因を特定するにはどうすればよいですか？

Chromeに組み込まれているタイムラインレコーダーを使用してページをプロファイリングすると、「スタイルの再計算」エントリが繰り返されます。それらをDOM要素またはイベントにリンクするための明確な情報はありません。

これらのエントリの原因を最もよく特定するにはどうすればよいですか？

google-chromeprofilingtimeline
25
52d6c6af

あなたへの私のアドバイスは、Chromeの Chrome Canary ビルドを使用することです。 Paul Irishは、Chrome Dev Tools here でタイムラインを使用する優れたデモを行っています。

たとえば、「スタイルの再計算」などのイベントをクリックするだけで、コード内でイベントが発生した場所を示すミニチュアスタックトレースを取得できます。

12
briangonzalez

調査用に投稿されたjQueryバージョンの代わりに、コンソールの単純なワンライナーがあります。

window.onanimationiteration = console.log;

これにより、アニメーションの名前やアニメーションが適用される要素など、アニメーションが実行されるたびに行が出力されます。

10
Knaģis

CSSトランジションまたはアニメーションがページの再計算をトリガーしているかどうかをテストできました。私はこれを行うためにjQueryを使用しましたが、好きなものを使用できます。

_$('*').css('transition', 'none');
$('*').css('animation', 'none');
_

これにより、ページのすべての要素でトランジションとアニメーションが効果的に無効になります。それらを一度に1つずつ実行してから、プロファイリングを再実行しました。私の場合、アニメーションが原因でした。

.css('animation')は次のようなものを返します

_"myCustomAnimation 15s linear 0s infinite normal none running"
_

またはアニメーションがない場合は、

_"none 0s ease 0s 1 normal none running"
_

したがって、（アニメーションを再度有効にするために）更新した後、次のスニペットは、アニメーションが定義されているすべての要素をログに記録します。

_$('*').each(function(){
  if($(this).css('animation').split(' ')[0] != 'none'){ //you could also check for infinite here if you want
    console.log(this);
  }
});
_

それぞれのアニメーションを個別に無効にすることで、問題の原因となっているアニメーションを特定することができました。

6
adamdport

あなたのページには無限に繰り返されるアニメーションがあるとほぼ確信しています。それが原因を言わずにスタイルの再計算を引き起こした理由です。

2
Denis

私はちょうど同じ問題を抱えていました（それが私があなたの質問を見つけた理由です）。

私の問題は、CSS3トランジションのすべてのプロパティが原因でした。必要なのはトランジションパディングだけだったので、私は怠け者でした。

その単一の変更を実装すると、ループが発生しました

1
jBoive