html - 低效的 CSS 选择器建议

Question

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

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

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

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

谢谢。

Answer 1

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

关于性能测试的主题 - 一本好书:

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

http://blog.archive.jpsykes.com/151/testing-css-performance/

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