CSS 的速度

发布于 2024-12-28 17:43:51 字数 658 浏览 1 评论 0原文

这只是一个帮助我更好地理解 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 文件。

This is just a question to help me understand CSS rendering better.

Lets say we have a million lines of this.

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

Which would be the fastest way to change the font of Hello World to red?

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

Also, what if there was at tag in the middle that had a unique id of "foo". Which one of the CSS methods above would be the fastest.

I know why these methods are used etc, im just trying to grasp better the rendering technique of the browsers and i have no idea how to make a test that times it.

UPDATE:
Nice answer Gumbo.
From the looks of it then it would be quicker in a regular site to do the full definition of a tag. Since it finds the parents and narrows the search for every parent found.

That could be bad in the sense you'd have a pretty large CSS file though.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

随心而道 2025-01-04 17:43:51

需要记住两件事:

  • 这将取决于 CSS 解析器/渲染引擎:即它会因浏览器的不同而有所不同。

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

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

Two things to remember:

  • This is going to depend on the CSS parser /rendering engine: i.e. it varies from browser to browser.

  • CSS is really, really, really fast anyway, even at it's slowest the human watching shouldn't notice

In general the simplest things are the fastest (as Gumbo nicely illustrates), but because we're already in such a fast environment don't think that you should sacrifice clarity and appropriate scoping (low specificity is like making everything public sort of). Just avoid * wherever you can :)

痴梦一场 2025-01-04 17:43:51

根据 Mozilla 开发人员中心,这种情况下最有效的选择器就是 。第三

事实上,他们明确指出,“不要用标签名称限定类规则”。一般来说,为了获得最大效率,请使用最简单的匹配选择器。这就是为什么 .third 击败 span.third 击败 .second span.third 等等。

我不知道 Gumbo 的结论是什么,但 Ólafur 似乎从中得出的结论是,在选择器中使用更多内容可以使 CSS 解析更加高效,而事实上,情况正好相反(假设其他 CSS 解析引擎的工作方式与 Mozilla 类似。)

According to the Mozilla Developer Center, the most efficient selector for this case would be simply .third

In fact, they state there, explicitly, "Don't qualify Class Rules with tag names". In general, for greatest efficiency, use the simplest selector that matches. That's why .third beats span.third beats .second span.third, etc.

I can't tell what Gumbo's conclusion is meant to be, but Ólafur appears to be drawing the conclusion from it that using more stuff in the selector makes the CSS parsing more efficient, when, in fact, it's just the opposite (assuming other CSS parsing engines work similarly to Mozilla's.)

£烟消云散 2025-01-04 17:43:51

您必须了解选择器的处理方式:

  • .third获取每个元素并检查类名third
  • < code>div.third:获取每个DIV元素并检查类名third
  • div.second div .third获取每个DIV元素,检查对于类名 second,运行这些并找到每个后代 DIV 元素并检查类名 third
  • div.first div.second div.third获取每个DIV元素,检查类名first,运行这些并找到每个后代 DIV 元素,检查类名第二,运行这些,最后检查类名第三

编辑   我必须承认,上述过程是幼稚的方法,通常效率不高。事实上,有些实现是从下到上而不是从上到下:

  • div.first div.second div.third获取每个DIV 元素,检查类名 third,获取第一个具有类名 secondDIV 祖先,获取第一个 DIV 祖先具有类名 first

You have to understand how the selectors are being processed:

  • .third: get every element and check for a class name third,
  • div.third: get every DIV element and check for a class name third,
  • div.second div.third: get every DIV element, check for a class name second, run through these and find every decendant DIV element and check for a class name third,
  • div.first div.second div.third: get every DIV element, check for a class name first, run through these and find every decendant DIV element, check for a class name second, run through these and finally check for a class name third.

Edit   I have to admit, that the procedure above would be the naive approach and is not generally efficient. In fact, there are implementations that go from bottom to top instead from top to bottom:

  • div.first div.second div.third: get every DIV element, check for a class name third, get the first DIV ancestor that has a class name second, get the first DIV ancestor that has a class name first.
稀香 2025-01-04 17:43:51

我想说这取决于浏览器。没有什么比实验更好的了,在这种情况下,一个简单的 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所说,不同选择器引起的时间差异似乎太小而无法测量。

I would say this depends on the browser. Nothing beats an experiment, in this case a simple JavaScript would probably do.

Update: I meant to do something like this:

<!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>

…but the time differences caused by different selectors appear to be too small to measure, just as annakata said.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文