Hiệu suất CSS với truy vấn phương tiện

Question

Tôi tự hỏi liệu CSS có thể là 'nặng' hay không, ví dụ: sử dụng rất nhiều thời gian phân tích cú pháp từ trình duyệt.

Ví dụ tôi sử dụng một tấm CSS với rất nhiều bộ chọn cụ thể, như

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

vv Có thể rằng noticably ảnh hưởng đến hiệu suất?

Tương tự cho việc sử dụng truy vấn phương tiện. Tôi muốn làm một trang web truy cập cho các thiết bị di động sử dụng các truy vấn phương tiện CSS3:

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

Để bây giờ tôi có khoảng 600 dòng CSS (không minified) trong tập tin chính của tôi, và đối với một số trang cụ thể bao gồm thêm các file CSS (từ 10-300 dòng).

Sử dụng truy vấn phương tiện sẽ thêm đáng kể vào điều tôi mong đợi. Điều đó có ảnh hưởng đến hiệu suất không?

Answer 1

Cách dễ nhất để kiểm tra là lấy bộ trang web hàng đêm hoặc Chrome Canary, sau đó kiểm tra đánh giá mới về hiệu suất CSS. Nó cho phép bạn xem thời gian mỗi bộ chọn sẽ chạy, cũng như% thời gian tổng thể được thực hiện. Các bản build mới của Opera cũng có một công cụ tương tự.

Dưới đây là một ảnh chụp màn hình nhỏ của những gì nó trông giống như: