5

これをテストする方法は不明ですが、Modernizer.load を使用してクエリを介して CSS スタイルシートにロードすると、同じスタイルシート内の CSS クラス名でルールを上書きするだけでパフォーマンスが向上しますか?

たとえば、デバイスがタッチをサポートしている場合、別のレイアウトをロードする必要があります。その方が高速ですか...

{
  test: Modernizr.touch,
  yep : 'css/touch.css',
  nope: 'css/base.css'
}

または、同じスタイルシートのスタイルを上書きします...

.container { width: 50% }

.touch .container { width: 100% }

違いは、余分なクエリの速度と 1 つの大きな CSS ファイルを持つことの重さに帰着するようですか?

4

2 に答える 2

0

ここに 3 つの詳細があることを理解する必要があります。

  1. サーバーへの呼び出し。

  2. すべての親スタイルを計算するブラウザ時間

  3. ファイルの重量。

答えはそうです。

プロパティの間に改行を入れずにcssを記述すると、1つの大きなファイルが2つのファイルよりも大きくなります。と重みの原因 1 ファイルの方が優れていることへの回答です。

.touchクラスで作成するページ全体がある場合は、クラスを含むファイルを作成する方が計算されます。

だから、私がやっていることは、サーバーを1回だけ呼び出して、1つのファイルを作成することです。すべてのスタイルを一緒にロードする方が良いため、サーバーへの呼び出し（重要な時間値）はすぐに終了します

于 2013-02-14T16:53:51.797 に答える
0

どちらのオプションも完全に有効だと思います。

タッチに固有の CSS コードが大量にある場合は、非タッチ ブラウザーへの余分な負担を避けるために、Modernizr を使用して取り込んでください。

ただし、私の好みは、一般的にこの種のオーバーライド スタイルを使用することです。

これは、Modernizr オプションを使用すると、Modernizr スクリプトが読み込まれて実行できるようになるまで Modernizr テストを実行できないため、タッチ スタイルの読み込みが遅れることになるためです。

そのため、メイン ページの読み込みの一部として読み込まれ、最初のレンダリングの準備ができている場合と比較して、ページの読み込み後にのみ読み込まれ、すぐには準備ができていない可能性があります。

この結果、タッチ スタイルが読み込まれる前にページが読み込まれて表示される可能性があります。理想的ではありません。

これは、Modernizr をノックアウトするためではありません。Modernizr は優れたツールです。ただし、Modernizr を使用せずに必要なことを実行できる場合は、一般的に優れています。

于 2013-02-15T08:00:00.550 に答える