16

这只是一个帮助我更好地理解 CSS 渲染的问题。

假设我们有一百万行。

<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; }

此外，如果中间的 at 标记具有唯一 id 为“foo”怎么办。上面哪一种 CSS 方法最快。

我知道为什么要使用这些方法等，我只是想更好地掌握浏览器的渲染技术，我不知道如何进行测试。

更新：很好的答案秋葵。从外观上看，在常规站点中进行标记的完整定义会更快。因为它找到了父母并缩小了对找到的每个父母的搜索范围。

从某种意义上说，这可能很糟糕，尽管您将拥有一个相当大的 CSS 文件。

4

4 回答 4

13

要记住两件事：

  • 这将取决于 CSS 解析器/渲染引擎：即它因浏览器而异。

  • 无论如何， CSS 真的，真的，真的很快，即使是最慢的人类观看时也不会注意到

一般来说，最简单的事情是最快的（正如 Gumbo 很好地说明的那样），但是因为我们已经处于如此快速的环境中，所以不要认为你应该牺牲清晰度和适当的范围（低特异性就像让所有东西都公开）。*只要尽可能避免:)

于 2009-02-11T09:52:40.233 回答
8

根据Mozilla 开发人员中心的说法，这种情况下最有效的选择器就是.third

事实上，他们在那里明确声明“不要用标签名称限定类规则”。通常，为了获得最大效率，请使用匹配的最简单的选择器。这就是为什么beat beats.third等。span.third.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，遍历这些并找到每个后代DIV元素并检查类名third，
  • div.first div.second div.third：获取每个DIV元素，检查类名first，遍历这些并找到每个后代DIV元素，检查类名second，遍历这些并最后检查类名third。

编辑   我不得不承认，上面的过程是幼稚的方法，通常效率不高。实际上，有些实现是从下到上而不是从上到下：

  • div.first div.second div.third：获取每个DIV元素，检查类名third，获取第一个DIV具有类名的祖先second，获取第一个具有类名的DIV祖先first。
于 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>

…但是正如 annakata 所说，由不同选择器引起的时间差异似乎太小而无法测量。

于 2009-02-11T09:50:08.523 回答