4

だから私は JavaScript (jQuery) ウィジェットのセットを構築しています。これらのウィジェットのすべての要素が使用されていることを確認したいのですbox-sizing: border-box(はい、これは IE バージョン 8 以降のみをサポートできることを認識しています。私は大丈夫です）。

a を実行するのは非常に遅いと聞きました[selector] > *が、どれくらい遅いのでしょうか?

つまり、ウィジェットの 1 つだけに対して、すべての要素が正しいボックス サイズになっていることを確認するために、このセレクターがあります。

.jg-grid-wrap,
.jg-grid-content-outer-wrap,
.jg-grid-colum-actions a,
.jg-grid-content-wrap,
.jg-grid-wrap .hide,
.jg-grid-wrap ul,
.jg-grid-wrap ul li,
.jg-grid-header-wrap,
.jg-grid-header-wrap li,
.jg-grid-header-wrap .sort-indicator,
.jg-grid-row,
.jg-grid-row li,
.jg-grid-footer-wrap,
.jg-grid-footer-wrap .column-selection
.jg-grid-wrap .controls,
.jg-grid-wrap .controls .first-page-link,
.jg-grid-wrap .controls .previous-page-link,
.jg-grid-wrap .controls .next-page-link,
.jg-grid-wrap .controls .last-page-link,
.jg-grid-wrap .controls .column-selection-link,
.jg-grid-wrap .controls .set-page-link,
.jg-grid-wrap .controls .total-page-count,
.jg-grid-wrap .controls .record-counts,
.jg-grid-wrap .controls .record-display-text
{
    box-sizing: border-box;
}

しかし、次のように書くだけで、はるかに小さくて簡単になります。

.jg-grid-wrap *
{
    box-sizing: border-box;
}

また、要素を追加する場合は、それを巨大なセレクターに追加することを忘れないでください。スター セレクターを使用すると、心配する必要はありません。

[selector] > *は本当に遅いので、考えられるすべての要素を個別にリストするのに時間をかける価値はありますか?

アップデート

最後に、私はただ行くつもりです：

[class^=jg-] *
{
    box-sizing: border-box;
}

このセレクターは、Google Chrome に基づいて合計 4 ミリ秒の ~14% を持っています。その他は少し小さい (~4%) ですが、考えてみると、CSS はおそらくパフォーマンスについて心配する必要がある最後の場所になるでしょう (私の JavaScript とサーバー側のコードがボトルネックの大部分になります)。本当に CSS chrome プロファイラーを最適化する必要がある場合は、必要なときにそこにいます。

4

2 に答える 2

6

そのクラスでマークされたコンテナの下のすべての要素が本当に必要な場合は、

.jg-grid-wrap *

>演算子は、一致を直接の子に制限します。

パフォーマンスへの影響は、関連する方法でレイアウトが更新されたときにすべての要素をテストする必要があることを意味するという事実に起因します。次の方法で少し改善できます。

.jg-grid-wrap div, .jg-grid-wrap form, .jg-grid-wrap ul

など、あなたが本当に気にかけているブロックレベルの要素で。(つまり、<span>タグに "box-sizing" プロパティがあるかどうか本当に気にしますか?)

Chrome の CSS プロファイラーは、高価な CSS ルールを見つけるのに非常に役立ちます。これは、あまり心配する前に経験的に調査する必要があります。最新の CSS エンジンはかなり高速です。

于 2012-06-09T13:35:49.853 に答える
1

ページが (再) 描画されるとき、ブラウザは CSS を右から左に評価します。

.jg-grid-wrap > *

これは基本的に、最初にページ上のすべての要素に一致します。次に、すべての要素の直接の祖先をチェックし、クラスを比較します。

それは悪いように聞こえますが、さらに悪いこともあります。

.jg-grid-wrap *

その下の要素については.jg-grid-wrapそれほど悪くはありませんが、他の要素があると、ブラウザは要素ツリーをたどっhtmlて先祖を見つける必要があります。

このロジックの一部は多少最適化できますが、それでも回避することをお勧めします。そのため、CSS ルールの一番右の部分をできるだけ具体的にするのがコツです。

したがって、私の結論は次のとおりです。コードをそのままにしておいてください。人間の目には最適に見えるものは、貧弱なブラウザにとっては悲惨なことになる可能性があります:)

于 2012-06-09T13:58:07.107 に答える