Проблемы с производительностью CSS

Question

Какие аспекты таблиц стилей (CSS) могут привести к снижению производительности веб-сайтов? Что-нибудь, что действительно может заглушить процессор?

спасибо заранее.

Сеш

Answer 1

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

Answer 2

CSS? Не так уж и сильно, но в старых (например, 4-го поколения) браузерах я видел проблемы с:

• слишком много делает для селектора *
• с использованием inherit много
• использование значения выражения IE оскорбительно
• загрузка большого количества внешних ресурсов (изображений, других документов CSS)
• применяет много того, что вы могли бы назвать незакрепленными селекторами, такими как div div

По сути, все, что было бы трудно каскадно проходить или много каскадно.

Answer 3

Браузеры очень хорошо умеют быстро отображать правила CSS.

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

Например, cnn.com предоставляет что-то вроде 150K CSS. На старых модемах это займет несколько секунд, поэтому CNN должен убедиться, что их CSS кешируется и распаковывается.

Answer 4

То, что душит не слишком старые браузеры, - это огромные фоны, которые используют "background-position: fixed" в стиле Complexspiral Redux .

Answer 5

Я лично никогда не встречал в CSS ничего такого, что могло бы сделать это. Флэш-контент и чрезмерно большие страницы, скорее всего, замедляют работу браузера. Тем не менее, я использовал бы изображения с использованием выражений или пользовательских фильтров IE (которые часто используются для прозрачности изображений PNG), может использовать много ресурсов ЦП.

Answer 6

Скорее всего, CSS-файл не так сильно душит сайт, как поездки на сервер, сложные вычисления и т. Д. Но если это так:

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

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

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

• (Случайный выстрел). IE может занять много времени, чтобы ошибочно принять ваши стили и элементы.

Answer 7

Я видел случаи, когда мозаичные фоновые изображения с высоким разрешением (обычно jpg или png) вызывают значительное замедление (эффект прерывистости) при прокрутке.

Answer 8

Трудно влиять на процессор (кроме выражений IE, как упоминалось в sblundy), но очень легко влиять на время загрузки страницы.

Старайтесь соблюдать Рекомендации по производительности на стороне клиента Yahoo , такие как:

• Поместите ссылки CSS вверху страницы
• Используйте <link> вместо @import
• Объединение CSS-файлов
• Сокращение CSS-файлов