16

これは、CSSレンダリングをよりよく理解するのに役立つ質問です。

これが100万行あるとしましょう。

<div class="first">
    <div class="second">
        <span class="third">Hello World</span>
    </div>
</div>

Hello Worldのフォントを赤に変更する最も速い方法はどれですか？

.third { color: red; }
div.third { color: red; }
div.second div.third { color: red; }
div.first div.second div.third { color: red; }

また、「foo」という一意のIDを持つタグが中央にあった場合はどうなりますか。上記のCSSメソッドのどれが最速でしょう。

なぜこれらの方法が使われるのかなどを知っています。ブラウザのレンダリング技術をよりよく理解しようとしているだけで、そのときのテストを行う方法がわかりません。

更新：いい答えガンボ。その外観から、通常のサイトではタグの完全な定義を行う方が速いでしょう。親を見つけて、見つかったすべての親の検索を絞り込むためです。

ただし、かなり大きなCSSファイルがあるという意味では悪いかもしれません。

4

4 に答える 4

13

覚えておくべき2つのこと：

  • これは、CSS パーサー/レンダリング エンジンに依存します。つまり、ブラウザーごとに異なります。

  • とにかく、CSS は本当に、本当に、本当に速いです。

一般に、最も単純なものは最も高速ですが (Gumbo がうまく説明しているように)、私たちはすでに非常に高速な環境にいるので、明快さと適切な範囲設定を犠牲にする必要はないと考えています (低い特異性は、すべてを公開するようなものです)。できるだけ避け*てください:)

于 2009-02-11T09:52:40.233 に答える
8

Mozilla Developer Centerによると、この場合の最も効率的なセレクターは単純です。.third

実際、彼らは明示的に「タグ名でクラスルールを修飾しないでください」と述べています。一般に、最大の効率を得るには、一致する最も単純なセレクターを使用します。そのため、.thirdBeats span.thirdBeats.second span.thirdなどです。

Gumbo の結論が何を意図しているのかはわかりませんが、Ólafur はそれから、セレクターでより多くのものを使用すると CSS の解析がより効率的になるという結論を引き出しているようです。実際には、それは正反対です (他の CSS解析エンジンは Mozilla のものと同様に機能します。)

于 2010-05-24T05:22:50.020 に答える
7

セレクターがどのように処理されているかを理解する必要があります。

  • .third:すべての要素を取得し、クラス名を確認しますthird。
  • div.third:すべてのDIV要素を取得し、クラス名を確認しますthird。
  • div.second div.third:すべてのDIV要素を取得し、クラス名を確認し、これらを実行してすべての派生要素をsecond見つけ、クラス名を確認します。DIVthird
  • div.first div.second div.third：すべてのDIV要素を取得し、クラス名を確認し、これらを実行してすべての派生要素firstを見つけ、クラス名を確認し、これらを実行して、最後にクラス名を確認します。DIVsecondthird

編集   上記の手順は素朴なアプローチであり、一般的に効率的ではないことを認めなければなりません。実際、上から下ではなく、下から上に進む実装があります。

  • div.first div.second div.third:すべてのDIV要素を取得し、クラス名を確認し、クラス名を持つthird最初のDIV祖先を取得し、クラス名を持つ最初の祖先をsecond取得します。DIVfirst
于 2009-02-11T09:42:58.433 に答える
0

これはブラウザに依存すると言えます。実験に勝るものはありません。この場合、単純な JavaScript で十分でしょう。

更新：私は次のようなことをするつもりでした：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Speed Test</title>
    <style type="text/css">
    .first { color: red; }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        var container = document.getElementById("container");
        var totalTime = 0;
        var passes = 100;
        for (var p=1; p<=passes; p++)
        {
            var startTime = new Date();
            for (var i=0; i<1000; i++)
            {
                var outerDiv = document.createElement("div");
                var innerDiv = document.createElement("div");
                var span = document.createElement("span");
                outerDiv.className = "first";
                innerDiv.className = "second";
                span.appendChild(document.createTextNode("Hello, world!"));
                outerDiv.appendChild(innerDiv);
                innerDiv.appendChild(span);
                container.appendChild(outerDiv);
            }                       
            var endTime = new Date();
            totalTime += (endTime - startTime);
        }                           
        alert("Average time: " + totalTime/passes);
    }
    </script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

…しかし、アナカタが言ったように、異なるセレクターによって引き起こされる時間差は測定するには小さすぎるようです.

于 2009-02-11T09:50:08.523 に答える