低效的 CSS 选择器建议答案

【问题标题】：Inefficient CSS selector suggestions低效的 CSS 选择器建议
【发布时间】：2011-05-16 13:16:41
【问题描述】：

我有 2 个关于重构旧 CSS 以提高性能的问题。

(1) 以下与打印机相关的 CSS 包含在 common.css 中，并且某些元素应用了选择器。它会影响浏览器渲染性能吗？换句话说，除了打印页面，浏览器是否使用 CSS 来检查元素是否匹配选择器？

@media print
{
    body * {visibility:hidden}
    #xView, #xView * {visibility:visible; }
    #xView {position:fixed;}
}

(2) 如何评估重构后的性能提升？

谢谢。

【问题讨论】：

【解决方案1】：

这不是一段大代码，所以谈论性能似乎有点离题，但仍然 - 如果您使用“*”选择器，它不会很快。如果您将可见性设置为一个容器而不是其中的每个元素，那会好得多。

关于性能测试的主题 - 一个很好的阅读：

您也可以在 Firebug 中测试页面加载时间，但我不知道结果有多准确。

【讨论】：

【解决方案2】：

1：不，print CSS 仅在打印时应用，因此在打印之前不会对其中的任何代码进行检查。

2：要衡量 CSS 性能，请查看test harness for CSS。

【讨论】：