CSS性能问题

Question

我想知道专家在编写CSS代码时会做些什么.使用tagname.className样式是不是很糟糕？继承会导致明显的性能损失吗？它只会在加载页面时影响浏览器吗？例如:用户向下滚动页面,在查看具有大量结果的页面时,可怜的CSS是否会成为缓慢滚动的罪魁祸首？

CSS示例:

div.result-row{...}
div.result-row div.photo-column{...}
div.result-row div.main-column{...}
div.result-row div.main-column div.text-row{}
div.result-row div.main-column div.date-row{}
div.result-row div.action-column{...}

VS

div.result-row{...}
div.photo-column{...}
div.main-column{...}
div.action-column{...}
div.text-row{...}
div.date-row{...}

我的页面输出了很多像这样的用户帖子......

<div class="result-row clearfix">
    <div class="photo-column">
        <img src="..." />
    </div>
    <div class="main-column">
        <div class="text-row">
            User's text
        </div>
        <div class="date-row">
            Today
        </div>
    </div>
    <div class="action-column">
        <a href="#">...</a>
        <a href="#">...</a>
    </div>
</div>

Answer 1

Google 页面速度的文档有一节介绍如何使用高效的CSS选择器.它提到后代选择器是如何低效的,因为一旦最右边的选择器匹配"浏览器必须[也]遍历DOM树,评估每个祖先元素,直到它找到匹配或到达根元素." Mozilla甚至说"后代选择器是CSS中最昂贵的选择器". 所以div.photo-column{...}会更好div.result-row div.photo-column{...}.

它还提到你应该删除多余的限定符,例如"由标记选择器限定的类选择器(当一个类仅用于一个标记时,这无论如何都是一个好的设计实践)." 这是有道理的,因为如果你有div.photo-column{...}而不是.photo-column{...}浏览器必须做两个检查,一个检查class ="photo-column",如果这是真的,一个检查元素是否是div,而不是只检查class,如果这是你指定的全部.