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




chrome パフォーマンス 見方 (4)

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

ChromeチームはChrome 30で次のように述べました。

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

このように、私はCSSセレクタプロファイラはそれまでと同じくらい有用ではなく、安全に削除することができると信じています。 これにより、すでに高速セレクタをマイクロ最適化しようとする開発者の割合も減少します。

古いバージョンのChromeを使用して問題を掘り下げてみることもできますが、現在のバージョンのChrome開発ツールの[タイムライン]タブを見て、Chromeでスタイルを計算するまでの所要時間を表示してくださいセレクタのパフォーマンスに影響する)、ページのレイアウトとペイントを行います。

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

あなたが尋ねる前に、JavaScript、不透明度、ボックスシャドウ/テキストシャドウのルールを無効にしました。 ページはまだまだ不安定です。 :/私はすべてのCSSを無効にする場合、それは素晴らしい実行されます。

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


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

hth

注:私はFirefoxのプラグインを知っていますが、ビットを最適化するのに役立ちます:)


うーん、そんなツールは聞いたことがない。

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

  • 任意のfilterステートメント(古典的なalpha=opacityなど - IEには非常に高価な非常に高度なグラフィカルフィルタが多数あります)

  • 巨大な要素(数千のピクセルのようなもの)

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

私は最初のことを強く疑うでしょう - アルファ透明画は、特に古いシステムではひどいレンダリングのボトルネックになることがあります。


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

いくつかの探偵作業の結果、すべてのボックスシャドーCSSラインを削除すると、パフォーマンスが大幅に向上することがわかりました。 私はバナー、テーブル、ボックス、タブからシャドーを受け取りました。それぞれには微妙な影とぼかしがありましたが、明らかにIE9がすべてのムーディーを得るには十分です。





profiler