低效的CSS选择器建议
问题描述:
我有2个关于重构我们的遗留CSS以提高性能的问题。低效的CSS选择器建议
(1)以下打印机相关 CSS包含在common.css中,某些元素应用选择器。它会影响浏览器渲染性能吗?换句话说,除了打印页面之外,浏览器是否使用CSS来检查元素是否与选择器匹配?
@media print
{
body * {visibility:hidden}
#xView, #xView * {visibility:visible; }
#xView {position:fixed;}
}
(2)如何评估refacotring后的性能改进?
谢谢。
答
这不是一个大的代码,所以谈论性能似乎有点偏离主题,但仍然 - 如果您使用“*”选择器,它不会很快。如果你设置了一个容器的可见性而不是其中的每个元素,那将会好很多。
测试性能的话题 - 一个很好看的:
http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
http://blog.archive.jpsykes.com/151/testing-css-performance/
你也可以在Firebug测试页面加载时间,但我不;知道如何准确的结果会是。