МЕНЬШЕ, медиа-запросы и производительность

Недавно я начал работать с LessCSS, и у меня был довольно большой успех в отношении того, насколько чистым и читаемым стал мой CSS. Тем не менее, я не думаю, что я использую Less в полной мере.

Сейчас я занимаюсь кодированием своего первого полностью отзывчивого сайта с использованием Менее, а меня интересуют производительность и скорость. Одно дело отметить, что я не придерживаюсь методологии "контрольной точки" - я масштабирую вещи вверх и вниз, пока они не сломаются, затем я пишу CSS, чтобы исправить их; который обычно приводит в любом случае от 20 до 100 медиа-запросов.

Я хотел бы начать использовать Less, чтобы вставить медиа-запросы внутри моих элементов, например, пример ниже:

.class-one {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}
.class-two {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}

Через мое первоначальное тестирование я обнаружил, что при просмотре скомпилированного вывода CSS эта методология приводит к нескольким (много!) экземплярам @media (max-width: ___px). Я просмотрел Интернет и не нашел ничего, что явно объясняет последствия производительности вложенных/пузырящихся запросов к мультимедиа.

Обновление 1: Я понимаю, что больше информации CSS приводит к загрузке большего файла CSS, но меня не так беспокоит время загрузки сайта как единственная метрика. Я больше интересуюсь обработкой памяти браузером и производительностью после готовности DOM.

Обновление 2 и полу-решение: Я нашел эту статью, в которой обсуждаются четыре основные категории селекторов CSS и их эффективность. Я настоятельно рекомендую прочитать, что помогло мне разобраться, как лучше всего справляться с моим CSS-методом с использованием медиа-запросов.

Итак, мой вопрос таков: после того, как DOM готов, будет ли это много запросов к мультимедиа в моей скомпилированной таблице стилей влиять на время загрузки и производительность?

Ответы

Ответ 1

Его почти невозможно дать вам абсолютно точный ответ.

Когда вы спрашиваете о производительности, типичным ответом является его профилирование и просмотр того, что вы получаете. Сначала закрепите самую медленную часть, затем повторите.

Вы можете создавать селектор CSS в инструментах разработчика Chrome:

enter image description here

В конечном счете, я не думаю, что медиа-запросы окажут почти такое же влияние на производительность по сравнению с даже немного сложным селектором.

Вы можете увидеть дополнительную информацию о написании эффективного CSS здесь:

https://developers.google.com/speed/docs/best-practices/rendering

Также в отношении размера файла и повторного CSS gzip почти полностью сводит на нет это, поскольку алгоритм gzip лучше всего работает с повторяющимися данными.

Ответ 2

> also u can write like this :-

// breakpoints

@mobile:     ~"(max-width: 767px)";

@tablet:     ~"only screen and (min-width: 768px) and (max-width: 991px)";

@desktop:     ~"only screen and (min-width: 992px) and (max-width: 1199px)";

@desktop-xl:     ~"only screen and (min-width: 1200px) and (max-width: 1350px)";


body{
   background:black;
    @media @mobile {
       background:red;

}

}