미디어 쿼리를 사용한 CSS 성능

Question

CSS가 '무거울'수 있는지 궁금합니다. 브라우저에서 많은 파싱 시간을 사용하십시오.

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

등 그 noticably 성능에 영향을 미칠 수있는 것처럼 나는 특정 선택기이 많은 CSS 시트를 사용하는 예를 들어

?

미디어 쿼리를 사용하는 경우와 같습니다. 나는 CSS3 미디어 쿼리를 사용하여 모바일 사이트에 액세스 할 수 있도록하려면 : 지금은 내 주요 파일에 CSS (축소 된되지 않음)의 약 600 라인을 가지고 들어

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

을, 어떤 특정 페이지에 대한 (추가 CSS 파일을 포함 10-300 줄 사이).

미디어 쿼리를 사용하면 예상보다 크게 늘어납니다. 그 결과가 실적에 영향을 미칩니 까?

Answer 1

확인하는 가장 쉬운 방법은 야간에 웹킷을 가져 오거나 Chrome Canary를 다운로드 한 다음 CSS 성능에 대한 새 감사를 확인하는 것입니다. 그것은 당신이 각 선택기가 실행하는 데 걸리는 시간뿐만 아니라 취한 전체 시간의 %를 볼 수 있습니다. 오페라의 새로운 빌드에는 비슷한 도구가 있습니다. 여기

가 어떻게 생겼는지의 작은 스크린 샷입니다 :