メディアクエリを使用したCSSのパフォーマンス

Question

CSSが「重く」なる可能性がありますか？ブラウザから多くの解析時間をかけてください。例えば

私はなど

:last-child, 
:nth-child(n) 
table.sortable thead tr th:not(.table-th-nosort):hover 

のように、特定のセレクタの多くのCSSのシートを使用するには、そのnoticablyパフォーマンスに影響を与えることはできますか？

media-queriesを使用する場合と同じです。 （私は私のメインのファイルに（縮小されていない）CSSの約600ラインを持っている、といくつかの特定のページには、余分なCSSファイルを含めるために今の

@media screen and (max-width: 600px) { 
    #sidebar { 
     display: none; 
     // etc 
    } 
} 

：私は、CSS3メディアクエリを使用してモバイルデバイス用のアクセスサイトを作りたいです10〜300行）。

メディアクエリを使用すると、私が期待しているものに大幅に追加されます。それはパフォーマンスに影響しますか？

Answer 1

チェックする最も簡単な方法は、夜間にWebkitを入手するか、Chrome Canaryを使用して、CSSの新しいパフォーマンスをチェックすることです。各セレクターの実行時間、および全体の時間の割合を表示することができます。 Operaの新しいビルドにも同様のツールがあります。ここで

は、それがどのように見えるかの小さなスクリーンショットです：