低效的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。