3

HTML5には新しい要素（HEADER、FOOTER、SECTION ...）があるので、パフォーマンスを向上させるためにCSSセレクターをどのように構成する必要がありますか？

header {}
header nav {}
header nav ul li{}

また

#header {}
#header .nav{}
#header .nav .menu{}

または、他のより効率的な方法で？

4

2 に答える 2

4

「効率」とは、ページの読み込み時間にどのように影響するかを意味する場合は、タグ名よりもクラスとIDに固執する必要があります。Googleには、興味深いと思われるスピーディーなCSSを作成するためのベストプラクティスページがあります。彼らのアドバイスの要点は、ブラウザがソートしなければならない要素の数を減らすことです。

このページで最も適切なポイントは、「タグセレクターよりもクラスセレクターとIDセレクターを優先する」ことです。すぐにわかるように、これは、これらのクラスおよびIDセレクターが一致する要素の数を減らす場合にのみ、実際に効率を向上させます。

ただし、その前に、そのページのアドバイスの合計を論理的な結論に導きましょう。CSSを作成する最も効率的な方法は、ページ上のすべてにIDを適用し、IDセレクターのみを使用することです。しかし、あなたはこれをすべきですか？おそらくそうではありません。

その理由は、CSSを作成するときに考慮すべき他の要因があるためです。ここにいくつかあります：

  1. セレクターがどれほど非効率的であっても、CSSの処理よりもはるかに時間がかかるページ上のものが他にもある可能性があります。最適化に時間を費やしている場合は、他の場所で費やしたほうがよい場合があります。
  2. あなたはあなたのウェブページを維持したいのですがsemantic、それは間違いなくあなたのページのすべてにIDを与えることを意味するものではありません。
  3. そのような構造を維持するのは苦痛でしょう
  4. 美的に不快なHTMLになります

これらすべてから私が引き出すのは、上記のポイントの多く、特に1番目と2番目のポイントを犠牲にしない限り、効率化のためのベストプラクティスに従うことです。

具体的な例として、最も簡単な答えは、一致するアイテムの数を減らすと、下部のセレクターがより効率的になるということです。

それらを1つずつ確認します。

header対。#header

ページに複数のヘッダー要素がある場合、IDは常により効率的です。ヘッダーが1つしかない場合は、同じように高速である必要があります。

header nav対。#header .nav

Googleのベストプラクティスページには、子孫セレクターがCSSで最も非効率的なセレクターであることが示されています。

これは、CSSが右から左に読み取るためです。右端の子孫が見つかったら、DOMツリーをさかのぼって、親のいずれかが一致するかどうかを判断する必要があります。そして、それはすべての試合のためにこれをしなければなりません。

セレクターが一致しない場合、セレクターが解釈を停止することがあります。したがって、ナビゲーションを探していてulに出くわした場合、そのulのヘッダーの親を探してDOMツリーを上ることはありません。これは私たちをそれほど驚かせるべきではありませんが、完全を期すために言及したいと思いました。

これらの点を総合すると、子孫セレクターを使用する場合は、セレクターの右端の部分をできるだけ具体的にする必要があるという結論に至ります。これにより、一致しない要素の数が最大化されるため、低速のDOMツリー検索の数が最小化されます。

したがって、例の2つのセレクターに戻ります。複数のナビゲーションを含む複数のヘッダーがあり、クラスを持っているのはほんの一握りのヘッダーである.nav場合、権利の方が効率的です。IDがヘッダーのヘッダーが1つと、IDがnavのナビゲーションが1つしかない場合は、同じように高速になります。

header nav ul li対。#header .nav .menu

この場合、以前と同じルールが適用されます。ただし、この場合、速度の違いは、ここに1つではなく2つの子孫セレクターがあるという事実によって増幅されます。

liページに複数の順序付けされていないリストがある場合は、ページ上のすべてがこの（より）複雑なセレクターと一致しないように、これら2つのセレクターの2番目を使用することをお勧めします。

于 2013-01-04T11:48:45.637 に答える
0

それはそれらがどのように使われるかによります。一度だけスタイルを設定する必要がある場合は、ヘッダー{}を使用します。それ以外の場合は、クラスやIDを追加します。

于 2013-01-04T11:38:42.660 に答える