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

Перевод: Николай Мациевский aka sunnybear

Опубликована: 17 февраля 2008

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

Примечание: ниже перевод статьи Dean Edwards "Optimising Performance" с советами по написанию CSS-кода для Internet Explorer'а, который будет быстрее отрабатывать на клиенте. Мои комментарии далее курсивом.

При первоначальном поиске информации по данному вопросу удалось наткнуться только на советы от разработчиков Firefox, однако, последняя редакция датирована 2000 годом, да и сами советы несколько противоречивы. Если кто-то может поделиться информацией по теме, сделайте это, пожалуйста, в комментариях.

Есть несколько приемов, с помощью которых можно Увеличить производительность IE7 на вашем сайте. Они перечислены в порядке убывания важности, если можно так сказать.

Стандартный режим

Добавьте объявление DOCTYPE самой первой строкой вашего HTML-документа, чтобы быть уверенными в том, что IE находится в стандартном режиме. Это увеличит производительность в IE6. (Кроме простого добавления DOCTYPE стоит постараться привести и весь документ к стандарту — это увеличит производительность не только в IE. Спасибо CurlyBrace, введение DOCTYPE на страницу (при его изначальном отсутствии) может привести к массовым проблемам верстки, по данной тематике есть неплохая статья «Тип документа: объявлять или не объявлять?». Стоит ознакомиться с ней и сначала решить, будете ли вы его вообще использовать.)

Эффективный CSS

Я недавно просматривал несколько статей на тему написания эффективного CSS. Все они описывают методы по сокращению CSS-свойств и прочему сжатия кода для минимизации конечного размера файлов. Это не то, на чем я хотел бы остановить свое внимание. Движок CSS-селекторов в IE7 поддерживает CSS2. Поскольку IE7 (прим.: спасибо mustangostang, имеется в виду библиотека IE7) написан на интерпретируемом языке (примерно в 100 раз медленнее, чем скомпилированный вариант), механизм разбора CSS-кода в нем заметно тормозит.

Вы можете улучшить ситуацию несколькими путями:

Начинайте селекторы с #ID везде, где только можно:
```
/* быстрее */
#content {..}

/* медленнее */
div#content {..}
```

По возможности избегайте универсальных (*) селекторов:

/* быстрее */
div.content {..}
a[href] {..}

/* медленнее */
.content {..}
[href] {..}

Не используйте строгое наследования в CSS-файлах

Дополнительный модуль ie7-strict.js обеспечивает в IE7 строгое CSS-наследование (CSS precedence, правила наследования CSS-объявлений по спецификации). Плохая новость заключается в том, что этот модуль серьезно влияет на производительность. Включайте его только при острой необходимости.

В данном случае, скорее всего, имеется в виду использование менее компактного CSS-кода, который будет обрабатываться быстрее, чем его меньший по размеру, более строгий, но хуже подходящий для IE эквивалент. Например, при возникновении проблем с отображением страниц в IE, лучше добавить дополнительные CSS-свойства, чем использовать JavaScript для эмуляции стандартного поведения.

Читать дальше

Все комментарии (habrahabr.ru)

Книги по оптимизации

Yet Another cSS selector

Ссылки по теме

Техника CSS sprites

Приемы для JavaScript

Хитрости для CSS

Облако сайтов