Увеличиваем скорость обработки CSS кода

При написании CSS кода возникает проблема медленного ранжирования в старых браузерах и компьютерах. Сегодня мы рассмотрим способы написания кода, который будет потреблять меньше пользовательский ресурсов и ранжироваться быстрее.

Каждый браузер по своему обрабатывает код. Например, Mozilla предлагает свои рекомендации по написанию кода.

Мы объединим все идеи и рекомендации существующие на данный момент, после чего обсудим детальнее каждую из них.

 

Способы ускорения ранжирования CSS

Избегайте перерисовки изображений после их загрузки

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

Вы можете установить эти свойства в html коде, или же css свойством.

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

Общие селекторы медленные, ID самый быстрый

Вот список селекторов, в порядке скорости ранжирования:

#sidebar  {}             /* ID (Самый быстрый) */
.home #slider {}         /* ID */
.footer {}               /* Class */
ul li a.arrow {}         /* Class */
ul {}                    /* Tag */
ul li a }                /* Tag */
* {}                     /* Универсальный (Самый медленный) */
#content [title='home']  /* Универсальный */

Для примера, этот селектор не будет обрабатываться достаточно быстро:

#sidebar > li

Казалось бы, если ID самый быстрый, такова конструкция будет работать быстро. Сначала находим ID, потом его дочерний элемент. Но это не так, браузеры считывают селекторы справа налево.

Принцип справа налево

Важно понимать, как браузеры обрабатывают css селекторы. Если селектор типа ol > li a[title="link"] прежде всего интерпретируется a[title="link"]

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

Ссылку на CSS файл пишите только в HEAD

Всегда выносите внешние CSS файлы и блоки стилей в head тег. Определяя внешние css файлы и блоки кода в теле документа, приводит к замедлению ранжирования.

Нисходящие селекторы

Уже рассматривали принцип справа налево. Вот пример нисходящего селектора, который потребляет критически много ресурсов:

html body nav a span {} 

Возьмите во внимание преимущества CSS каскадов

Иногда можно получить тот же результат без использования дополнительных селекторов. Для примера рассмотрим код:

nav li a {font-size:14px}

Такого же эффекта можно добиться, принимая во внимание каскадное наследование стилей:

nav {font-size:14px}

НЕ делайте так:

form#UserLogin {}

ID самый быстрый селектор, но он не будет работать достаточно быстро в данной конструкции. Это также применимо к классовым селекторам .classname

CSS3 селекторы

CSS3 селекторы (например :first-child) очень удобны в поддержании чистоты и семантики кода. Но, фактически они потребляют больше ресурсов браузера. Если вы обеспокоены разработкой быстрого css кода, лучше их не использовать вообще.

Скорость CSS и Практика

Это может выглядеть, как будто надо везде влепить ID и прописать стили к ID элемента. Но так теряется семантика кода, что более критически нежели несколько бит клиентской памяти.

Используйте выше рассмотренные принципы для создания специфических сайтов. Например для мобильных устройств с ограниченными ресурсами. В других случаях не беспокойтесь о пользовательских ресурсах.

Какие техники используете Вы для написания css кода? Обязательно делимся практикой в комментариях ниже!

Источник материала ...

Дальше: Как правильно подобрать сотрудников? Принципы подбора результативных работников