2

border-radius:X pxLinkedIn の新しい HTML5 iPad アプリでは、ページのレンダリング速度を向上させるために、丸みを帯びた境界線が取り除かれていることがわかりました。これは、わずかな改善しか提供できなかったようです。より一般的には、Web サイトのパフォーマンスに対するさまざまな CSS ルールの影響を測定する方法を考えています。microtime()for CSSはありますか？

更新@valentinas によって提案されたパフォーマンス テストを実行しました: http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

これは私のページのクラスの測定値を提供しますが、特定の要素の rule1 と rule2 を比較することにもっと興味があります。それでも、以下はデータです。私のサイトでは、Twitter Bootstrap.css とそのクラス セレクターの多くを使用しています。これは、解釈が難しいと思われるデータのスナップショットです。誰かがこれを出発点として手伝ってくれるでしょうか？

....
Selector          # Elms.  # Child.     Delta   Total
Removing #back-top  1   2   saves   7.17ms  3.90ms
Removing .container-fluid   1   414 saves   7.15ms  3.93ms
Removing .oGreen    1   0   saves   7.14ms  3.94ms
Removing .row-fluid 2   316 saves   7.07ms  4.00ms
Selectors Tested:   128
Baseline Time:  11.08ms
Num. Tests: 120
4

1 に答える 1

2

CSSのロードと適用の実際のパフォーマンスへの影響をテストするために利用できるツールは多数あります。とは言うものの、あなたが具体的に言及したことでは、それらをテストすることは特に困難です。

経験豊富なCSS開発者は、丸みを帯びたコアラーとCSS3ボックスシャドウが「パフォーマンスの問題」を引き起こす可能性があることを示す研究に出くわしますが、このコンテキストでは、ページの応答性またはページがユーザーのアクションにどれだけ速く応答するかについてより具体的に話します。

それについてもう少し詳しく説明させてください。ページのレンダリング速度や、CSSと画像アセットがダウンロードされてクライアントで利用できるようになるまでにかかる時間について話すとき、さまざまなツールが提供できる明確な指標があります。HTTPの要求時間と応答時間は、最初の要求からDOMの準備ができるまでの時間と同様に測定可能です。問題は、ページの応答性を調べ始めたときに、これらの簡単に測定できることがすべてすでに発生していることです。これらの問題は、特定のアプリケーションの機能、機能、およびスタイルに関連しており、アプリケーション固有の方法でのみテストできます。

例として、特定のコンテキストでは、CSS3ボックスシャドウがページのスムーズでないスクロールや、ユーザーアクションとイベント完了の間の遅延時間を引き起こす可能性があることを示した研究があります。これをテストする最も簡単な方法は、ボックスシャドウがある場合とない場合でページを手動でテストして、違いを視覚的に確認できるようにすることです。さて、ボックスシャドウが特定の問題を引き起こすことがわかっている場合、これはテストすると思われるかもしれませんが、その特定の問題に関する研究と調査結果を公開している人々にとって、これはほぼ間違いなく彼らが見たものではありません初めに。それは試行錯誤の末に発見されたものでした。

結局のところ、本当の答えは経験です。問題を解決し、自分の集合的な知識を追加したことです。これらの問題について説明しているブログやその他のリソースを読むと、それを助けることができます。

于 2012-05-03T22:10:21.647 に答える