web-dev-qa-db-ja.com

CSSパフォーマンスプロファイラー?

私は現在サイトで作業していますが、スタイルシートのどこかで、IEのパフォーマンスが低下しています。そこに良いCSSプロファイラーはありますか?パフォーマンスを低下させているルールを特定できるツールが欲しいのですが。

質問する前に、JavaScript、不透明度、およびボックスシャドウ/テキストシャドウのルールを無効にしました。ページはまだびくびくしています。 :/すべてのCSSを無効にすると、うまく動作します。

ページのプロファイルを作成し、CSSのボトルネックがどこにあるかを報告できるツールが必要です。

55

それで、私はついに、ページ上のすべてのCSSクラスにインデックスを付け、ページをスクロールしながらそれらを個別に切り替えるJavaScript関数の作成に取り掛かりました。これにより、誤ったクラスがすぐに特定され、そこから誤ったプロパティを特定することができました。 border-radius多くの子を含む要素(例:ボディレベルdiv)で信じられないほどIE9では不十分です。

CSSストレステスト用にgithubリポジトリを開始しました: https://github.com/andyedinborough/stress-css

そこから、ブックマークレットをインストールして、任意のページでテストを簡単に実行できます。

68

Googleの Page Speed プラグインには、CSSを分析し、非効率的なセレクターについて説明するセクションがあります。おそらくそこから始めますか?

hth

注:Firefoxプラグインは知っていますが、少し最適化するのに役立つはずです:)

6
Stuart Blackler

うーん、そのようなツールについて聞いたことがありません。

何も見つからない場合は、手動で注意することが含まれます

  • filterステートメント(従来のalpha=opacityその他-IEには、非常に高価な非常に高度なグラフィカルフィルターが多数あります)

  • 巨大な要素(数千ピクセルの大きさなど)

  • 巨大な背景画像-多分それらすべてを少しの間削除しますか?

私は最初のポイントを強く疑っています-アルファ透明度は、特に古いシステムでは、ひどいレンダリングのボトルネックになる可能性があります。

3
Pekka 웃

現在取り組んでいるWebプロジェクトでもパフォーマンスの問題があります。 Firefox、Chrome、さらにはIE8でも問題なく動作します。 IE9ではそれは行き詰まります。

いくつかの探偵の仕事の後、私はすべてのボックスシャドウCSS行を削除するとパフォーマンスが大幅に向上することを発見しました。バナー、テーブル、ボックス、タブからの影があり、それぞれにわずかな量の影とぼかしがありましたが、IE9がすべての不機嫌になるには明らかに十分でした。

2
Chordian

Chromeこの種のことを行うためのCSSセレクタプロファイラーを含むために使用される開発ツール。そのスクリーンショットを見ることができます このブログ投稿で

Chrome team Chrome で機能をプルしました:

CSSセレクターのマッチングは、プロファイラーの実装時に低速であった一般的なセレクターの大多数に対して、適度に高速になりました。この時間は、タイムラインの「スタイルの再計算」イベントにも含まれています。

そのため、CSSセレクタープロファイラーは、以前ほど有用ではなく、安全に削除できると思います。これにより、すでに高速なセレクターをマイクロ最適化しようとする開発者の割合も減ります。

古いバージョンのChromeを使用して問題を掘り下げることもできますが、現在のバージョンの=の タイムラインタブ を確認することをお勧めします。 Chrome開発ツールを使用すると、スタイル(セレクターのパフォーマンスが影響を受ける)、レイアウト、ページのペイントにChromeがかかった時間が表示されます。

1
nikmd23

Operaはプロファイラーでcssプロファイリングを実験しています。

有効にすることができます このページの手順に従ってください 。次に、プロファイラーを開き、プロファイリングを開始して、分析するページを更新します。レンダリングが終了したらプロファイリングを停止すると、結果が表示されます。

0
lulalala