Оптимизация CSS

Тег: Оптимизация CSS.

Тег: Оптимизация CSS
Существует четыре основных аспекта оптимизации CSS:

⟹ Производительность загрузки – в основном за счет уменьшения размера файла, уменьшения блокировки загрузки и улучшения параллелизма.

⟹ Производительность селектора.

⟹ Производительность рендеринга.

⟹ Ремонтопригодность, надежность.

Оптимизация CSS – производительность загрузки

1. Сжатие CSS: упаковка и сжатие написанного CSS может значительно уменьшить его объем;

2. Единый стиль CSS: когда требуются нижнее и левое поля,

Много раз выбирают:margin: top 0 bottom 0;

Но margin-bottom: bottom; margin-left: left; исполнение более эффективно;

3. Уменьшите использование @import и используйте ссылку, потому что последняя загружается вместе при загрузке страницы, а первая должна ждать загрузки страницы перед загрузкой;

4. Разумно создавайте макет CSS, обращайте внимание на повторное использование стилей и сокращайте время, затрачиваемое на рендеринг. Для выбора класса и идентификатора используйте менее глобальное сопоставление, такое как *, и разумно задайте базовые стили (например, настройку таблицы{}), чтобы улучшить повторное использование.

Оптимизация CSS – производительность селектора

Селекторы CSS сопоставляются справа налево. При использовании селекторов потомков браузер просматривает все дочерние элементы, чтобы определить, является ли он указанным элементом и т. д.;

Избегайте использования подстановочных знаков.

Например, *{} количество вычислений поражает! Выберите только те элементы, которые вам нужны.

Выберите как можно меньше тегов, но используйте класс.

Например: #nav li{}, вы можете добавить имя класса nav_item в li, выберите .nav_item{} следующим образом.

Не используйте теги для уточнения идентификаторов или селекторов классов.

Например: ul#nav, следует упростить до #nav.

Используйте селектор потомков как можно реже и уменьшите вес селектора.

Накладные расходы селекторов-потомков самые высокие, постарайтесь свести к минимуму глубину селекторов, самый высокий уровень — не более трех слоев, и больше используйте классы для связывания каждого элемента метки.

Подумайте о наследовании.

Знайте, какие свойства могут быть унаследованы, и избегайте повторения правил для этих свойств.

Оптимизация CSS – производительность рендеринга

1. Аккуратно используйте высокопроизводительные атрибуты: плавающие, позиционирующие;

2. Сведите к минимуму перестановку страниц и перерисовку;

Переставить в соответствии с порядком написания css:

Позиция: позиция, верх, лево, z-индекс, плавающая точка, отображение.

Размер: ширина, высота, поля, отступы.

Серия текста: шрифт, высота строки, цвет, межбуквенный интервал.

Граница фона: фон, граница.

Другое: анимация, переход.

Перерисовать: границу, контур, фон, box-shadow, если можно использовать background-color, постарайтесь не использовать background;

3. Удалить пустые правила: {};

4. Когда значение атрибута равно 0, единицы не добавляются;

5. Значение атрибута представляет собой плавающее десятичное число 0.**, а 0 перед десятичной точкой можно опустить;

6. Стандартизируйте различные префиксы браузеров: первыми идут те, у которых есть префиксы браузеров. Далее следуют стандартные атрибуты;

7. Не используйте префикс @import, это повлияет на скорость загрузки css;

8. В полной мере используйте свойства наследования CSS, чтобы уменьшить объем кода;

9. Абстрактно извлекайте общедоступные стили и уменьшайте объем кода;

10. Селектор оптимизирует вложенность и старается избегать слишком глубоких уровней;

11. Изображение спрайта css, маленькая иконка аналогичной части той же страницы, удобна в использовании и уменьшает количество запросов на странице, но при этом само изображение станет больше, при его использовании учитывайте преимущества и недостатки ясно, а затем использовать его;

12. Поместите файл css вверху страницы.

Ремонтопригодность и надежность

1. Извлекайте стили с одинаковыми атрибутами, интегрируйте их и используйте на страницах через классы, чтобы повысить удобство сопровождения CSS;

2. Следуя предыдущему, oocss также является одним из способов улучшить производительность css. Определяя повторно используемые и семантически хорошие базовые классы, а затем добавляя их в html, этот метод также используется многими фреймворками пользовательского интерфейса, такими как :class=”btn btn-active btn-blue”;

3. Разделение стиля и содержания: код css определяется во внешнем css;

4. Разделение контейнера и стиля;

Ниже представлены все материалы раскрывающие эту тему:

Как оптимизировать CSS для повышения производительности веб-сайтов.

CSS оптимизация — 21 способ ускорить сайт

CSS должен проходить через относительно сложный конвейер, точно так же, как HTML и JavaScript. Браузер должен загрузить файлы с сервера, а затем приступить к их синтаксическому анализу и применению к...

Оптимизация JS и CSS кода как сделать?

Оптимизация JS и CSS кода сайта онлайн – подробное руководство

Оптимизация JS и CSS кода сайта, является одним из наиболее значимых аспектов технической оптимизации сайта. Причина этому — освобождение большего количества ресурсов сайта, благодаря уменьшению обращений к базе данных и...