spam poison

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

Эта статья на других языках: English

Cоветы по написанию CSS-кода для Internet Explorer'а, который будет быстрее отрабатывать на клиенте. Мои комментарии далее курсивом.


Есть несколько приемов, с помощью которых можно Увеличить производительность 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 для эмуляции стандартного поведения.



Информация о статье
Написана: Tue, 24 May 2005 01:04:00 EEST
Авторы: Dean Edwards
Добавил(а): AlexParamonov at Tue, 02 Dec 2008 01:04:50 EET
Информация о переводе
Переведено: Sun, 17 Feb 2008 01:07:00 EET
Язык оригинала: English
Эта статья на других языках: English
Перевод: Николай Мациевский a.k.a sunnybear

Добавил(а): AlexParamonov at Tue, 02 Dec 2008 01:09:19 EET
Изменил(а): AlexParamonov at Wed, 03 Dec 2008 17:59:34 EET
Ссылки по теме
Copyright © 2008-2010 Alexander Paramonov
Valid XHTML 1.0 Transitional