CSS 性能问题

Posted 2023-02-21

【中文标题】CSS 性能问题

【英文标题】：CSS Performance Question

【发布时间】：2010-11-03 05:21:09

【问题描述】：

我想知道专家们在编写 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...

对

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>

【参考方案1】：

Google 的Page Speed 的文档中有一个关于使用efficient CSS selectors 的部分。它提到了后代选择器是如何低效的，因为一旦匹配了最右边的选择器，“浏览器必须[也] 遍历 DOM 树，评估每个祖先元素，直到找到匹配项或到达根元素。” Mozilla 甚至说"the descendant selector is the most expensive selector in CSS." 所以div.photo-column... 比div.result-row div.photo-column... 更可取。

它还提到您应该删除多余的限定符，例如“由标签选择器限定的类选择器（当一个类仅用于一个标签时，无论如何这是一个很好的设计实践）。”这是有道理的，因为如果你有 div.photo-column... 而不是 .photo-column... 浏览器必须进行两次检查，一次检查 class="photo-column"，如果是这样，检查元素是否为 div，如果这就是您指定的全部内容，而不仅仅是检查课程。

【讨论】：

这些链接很有帮助。谢谢兄弟。

【参考方案2】：

它应该只影响文件大小，因此会影响加载时间。

解决这个问题的一个好方法是在您开发时使 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...

直播

.result-row....photo-column....main-column....text-row.date-row.action-column...

编辑

在阅读了此页面上的一些 cmets 后，使用复杂的选择器会影响渲染时间是有道理的。根据我读到的测试结果，加载时间很小，不会引起注意，但似乎确实会影响它。

这应该仍然不会影响滚动。

阅读这些：

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors https://developer.mozilla.org/en/Writing_Efficient_CSS

【讨论】：

没有真正回答他的问题（滚动缓慢）。

有什么好的工具可以用来做这个吗？缩小？我想一个工具仍然不会去掉不必要的标签选择器

@musicfrea - 确实如此，检查我的第一句话

@iceangel89 - 是的，缩小器不会编辑标签，只是删除空格和可能不需要的尾随分号。

【参考方案3】：

CSS 不会导致滚动缓慢。不过，可能是固定的背景（通过background-attachment: fixed）。以我的经验，我注意到那些在滚动时往往会减慢浏览器的速度，所以这是最有可能的事情。如果您不使用其中任何一个，则只需检查以确保您没有使用巨大的背景图片。

【讨论】：

这样做的原因是浏览器必须在每个滚动时重新渲染，否则它只会渲染页面的不可见部分，而将可见部分保持原样

【参考方案4】：

小心。删除和添加选择器的范围会更改规则的优先级，并可能导致生产输出出现意外结果。

缩小被高估了。现代的，配置良好的网络服务器将发送 gzip'ed CSS，这将非常有效地折叠空格和重复的单词。对于使用比 56k 调制解调器更快的任何东西的人来说，每个 CSS 文件几 K 的性能提升是无法察觉的。相比之下，单个 100x100 像素的 JPEG 图像很容易消耗比 CSS 和 JS 文件加起来更多的带宽。

结合缓存，这在很大程度上使得优化 CSS 大小的需求变得多余，或者至少远不如保持代码可维护性重要。

至于它如何影响渲染速度，我不知道，但我怀疑这在很大程度上取决于实现（特定于浏览器）。

【参考方案5】：

删除标签名称不会做任何事情，但会从文件大小中节省几个字节。我发现 elm.className 符号比简单地在其中抛出仅类名选择器更容易理解。更不用说，删除标签会改变该规则的特异性水平。对于复杂（或写得不好）的 CSS 布局，这可能会产生一些非常不寻常的后果。性能提升将仅限于 CSS 解析器不必读取的几个额外字符，这将是难以察觉的。

【参考方案6】：

CSS 规则都在页面加载时应用。当用户在页面上移动时，CSS 已经完成了它的工作。

【参考方案7】：

糟糕的 css 肯定会影响渲染，但我认为它不会影响渲染后的滚动。在您的示例中，至少避免选择器 3 级深。单级 css 选择器将比双级选择器更快。放置标签类型应该会加快选择过程，因为无需匹配 DOM 文档中的 *.class，它只需匹配 div.class，过滤您必须查看类的 dom 节点的类型。

【参考方案8】：

不确定盖伦的答案是否 100% 正确。有几篇带有基准的不错的文章有不同的结论“Performance Impact of CSS Selectors”。然而，在大多数现实世界的情况下，您不会注意到任何差异，因此可能的好处不值得付出努力。