低效的CSS选择器建议

Question

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

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

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

（2）如何评估refacotring后的性能改进？

谢谢。

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测试页面加载时间，但我不;知道如何准确的结果会是。

Answer 2

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

2：为了测量CSS性能，看看这个test harness for CSS。