CSS速度

前端之家收集整理的这篇文章主要介绍了CSS速度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这只是一个问题,可以帮助我更好地理解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; }

另外,如果中间的标签中有一个唯一的id是“foo”,那该怎么办?上面哪一个CSS方法是最快的。

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

更新:
很好的回答Gumbo。
从它的外观来看,在一个常规的网站上做一个标签的完整定义会更快。因为它找到了父母,并缩小搜索每个父母的搜索

这可能是坏的,因为你会有一个非常大的CSS文件

解决方法

要记住的两件事情

>这将取决于CSS解析器/渲染引擎:即它从浏览器到浏览器不同。
> CSS真的,真的,真的很快,即使是最慢的人看不会注意到

一般来说,最简单的事情是最快的(如Gumbo很好地说明的),但是因为我们已经处于这样一个快速的环境中,所以不要以为你应该牺牲清晰度和适当的范围(低特异性就像使所有公共的一样)。只要避免*无论你在哪里可以:)

原文链接:https://www.f2er.com/css/218290.html

猜你在找的CSS相关文章