私は現在サイトで作業していますが、スタイルシートのどこかで、IEのパフォーマンスが低下しています。そこに良いCSSプロファイラーはありますか?パフォーマンスを低下させているルールを特定できるツールが欲しいのですが。
質問する前に、JavaScript、不透明度、およびボックスシャドウ/テキストシャドウのルールを無効にしました。ページはまだびくびくしています。 :/すべてのCSSを無効にすると、うまく動作します。
ページのプロファイルを作成し、CSSのボトルネックがどこにあるかを報告できるツールが必要です。
それで、私はついに、ページ上のすべてのCSSクラスにインデックスを付け、ページをスクロールしながらそれらを個別に切り替えるJavaScript関数の作成に取り掛かりました。これにより、誤ったクラスがすぐに特定され、そこから誤ったプロパティを特定することができました。 border-radius
多くの子を含む要素(例:ボディレベルdiv
)で信じられないほどIE9では不十分です。
CSSストレステスト用にgithubリポジトリを開始しました: https://github.com/andyedinborough/stress-css
そこから、ブックマークレットをインストールして、任意のページでテストを簡単に実行できます。
Googleの Page Speed プラグインには、CSSを分析し、非効率的なセレクターについて説明するセクションがあります。おそらくそこから始めますか?
hth
注:Firefoxプラグインは知っていますが、少し最適化するのに役立つはずです:)
うーん、そのようなツールについて聞いたことがありません。
何も見つからない場合は、手動で注意することが含まれます
filter
ステートメント(従来のalpha=opacity
その他-IEには、非常に高価な非常に高度なグラフィカルフィルターが多数あります)
巨大な要素(数千ピクセルの大きさなど)
巨大な背景画像-多分それらすべてを少しの間削除しますか?
私は最初のポイントを強く疑っています-アルファ透明度は、特に古いシステムでは、ひどいレンダリングのボトルネックになる可能性があります。
現在取り組んでいるWebプロジェクトでもパフォーマンスの問題があります。 Firefox、Chrome、さらにはIE8でも問題なく動作します。 IE9ではそれは行き詰まります。
いくつかの探偵の仕事の後、私はすべてのボックスシャドウCSS行を削除するとパフォーマンスが大幅に向上することを発見しました。バナー、テーブル、ボックス、タブからの影があり、それぞれにわずかな量の影とぼかしがありましたが、IE9がすべての不機嫌になるには明らかに十分でした。
Chromeこの種のことを行うためのCSSセレクタプロファイラーを含むために使用される開発ツール。そのスクリーンショットを見ることができます このブログ投稿で 。
Chrome team Chrome で機能をプルしました:
CSSセレクターのマッチングは、プロファイラーの実装時に低速であった一般的なセレクターの大多数に対して、適度に高速になりました。この時間は、タイムラインの「スタイルの再計算」イベントにも含まれています。
そのため、CSSセレクタープロファイラーは、以前ほど有用ではなく、安全に削除できると思います。これにより、すでに高速なセレクターをマイクロ最適化しようとする開発者の割合も減ります。
古いバージョンのChromeを使用して問題を掘り下げることもできますが、現在のバージョンの=の タイムラインタブ を確認することをお勧めします。 Chrome開発ツールを使用すると、スタイル(セレクターのパフォーマンスが影響を受ける)、レイアウト、ページのペイントにChromeがかかった時間が表示されます。
Operaはプロファイラーでcssプロファイリングを実験しています。
有効にすることができます このページの手順に従ってください 。次に、プロファイラーを開き、プロファイリングを開始して、分析するページを更新します。レンダリングが終了したらプロファイリングを停止すると、結果が表示されます。