CSS производительность с медиа-запросами - PullRequest
Новая
       3

CSS производительность с медиа-запросами

9 голосов
/ 05 января 2012

Мне интересно, может ли CSS быть «тяжелым», например использовать много времени анализа из браузера.

Например, я использую лист CSS с множеством определенных селекторов, например 

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

и т.д.. Может ли это заметно повлиять на производительность?

То же самое для использования медиа-запросов. Я хочу сделать сайт доступным для мобильных устройств с помощью медиазапросов CSS3: 

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

На данный момент у меня есть около 600 строк CSS (не минимизировано) в моем основном файле, и для некоторых конкретных страниц включают дополнительные CSS-файлы (между 10-300 строками).

Использование медиазапросов существенно увеличило бы то, что я ожидаю. Повлияет ли это на производительность?

1 Ответ

3 голосов
/ 06 января 2012

Самый простой способ проверить это взять ночной веб-набор или Chrome Canary, а затем проверить новый аудит производительности CSS. Это позволяет увидеть, сколько времени занимает запуск каждого селектора, а также% общего времени, затраченного на выполнение. Новые сборки Opera также имеют похожий инструмент.

Вот небольшой скриншот того, как это выглядит:

CSS performance audit

...