Профилировщик производительности CSS?

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

Прежде чем вы спросите, я отключил правила JavaScript, opacity и box-shadow/text-shadow. Страница по-прежнему дергается. :/ Если я отключу все CSS, все будет работать отлично.

Мне нужен инструмент, который может профилировать страницу и сообщать о узких местах CSS.


css performance internet-explorer profiler
person Andy Edinborough    schedule 02.03.2011    source источник
comment
Таким образом, создается впечатление, что мошеннические правила CSS относятся только к IE9. Правильно, на этой странице IE7/8 вытесняет IE9. Я дважды проверил этот результат, используя пару чистых виртуальных машин. Единственной средой, которая отставала, была IE9. :/   -  person Andy Edinborough    schedule 03.03.2011
comment
Еще один интересный момент заключается в том, что переключение в режим IE7 или IE8 в IE9 устраняет узкое место.   -  person Andy Edinborough    schedule 03.03.2011

Ответы (6)


arrow_upward
68
arrow_downward

Итак, я наконец добрался до написания функции JavaScript, которая индексировала все мои классы CSS на странице, а затем переключала их по отдельности при прокрутке страницы. Это сразу же выявило ошибочный класс, и оттуда я смог определить ошибочное свойство. Оказывается, border-radius для элемента, который содержит много дочерних элементов (например, основной уровень div), невероятно плохо работает в IE9.

Я создал репозиторий на github для своего стресс-теста CSS: https://github.com/andyedinborough/stress-css

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

person Andy Edinborough    schedule 14.04.2011
comment
Хорошо сделано! Это также объясняет, почему переход на IE7/IE8 ускоряет работу. - person Pekka; 25.04.2011

arrow_upward
6
arrow_downward

В плагине Page Speed от Google есть раздел, который анализирует ваш CSS и сообщает вам о неэффективных селекторы, может быть, начать там?

чт

Примечание. Я знаю, что это плагин для Firefox, но он должен помочь немного оптимизировать :)

person Stuart Blackler    schedule 02.03.2011
comment
Спасибо, я забыл о Page Speed. Хотя это не совсем то, что я ищу, это полезно. - person Andy Edinborough; 03.03.2011
comment
Одна вещь, которую вы можете сделать, чтобы определить проблемную область (ы), — это прокомментировать половину css, протестировать ее, прокомментировать следующую половину. Когда вы найдете половину, которая замедляет его, повторите, но в этой половине. Тогда вы найдете правила, которые занимают время. Просто еще одна идея, пока у меня есть Google для вас :) - person Stuart Blackler; 03.03.2011
comment
Странно то, что я не могу сузить его... почти как каждое правило одинаково снижает производительность. :/ - person Andy Edinborough; 03.03.2011

arrow_upward
3
arrow_downward

Хм, никогда не слышал о таком инструменте.

Если вы не найдете ни одного, то, на что нужно обратить внимание вручную, будет включать

  • Любые операторы filter (классические alpha=opacity и другие - в IE есть ряд очень продвинутых графических фильтров, которые очень дороги)

  • Огромные элементы (например, тысячи пикселей)

  • Огромные фоновые изображения — может, убрать их все на минутку?

Я бы сильно подозревал первый пункт — альфа-прозрачность может быть ужасным узким местом рендеринга, особенно на старых системах.

person Pekka    schedule 02.03.2011
comment
Спасибо, Пекка, но отключение непрозрачности было фактически одной из первых вещей, которые я сделал. Хотя некоторым это помогло, отставание все еще есть. - person Andy Edinborough; 02.03.2011
comment
@ Энди, да, ты уже упомянул о непрозрачности - перечитал, извини. - person Pekka; 02.03.2011

arrow_upward
2
arrow_downward

У меня также есть проблемы с производительностью в веб-проекте, над которым я сейчас работаю. Он хорошо работает в Firefox, Chrome и даже в IE8. В IE9 он вязнет.

После некоторой детективной работы я обнаружил, что удаление всех строк CSS box-shadow значительно улучшило производительность. У меня были тени от баннеров, таблиц, блоков и вкладок, каждая с небольшим количеством тени и размытия, но, по-видимому, достаточного для того, чтобы IE9 стал угрюмым.

person Chordian    schedule 03.06.2013
comment
У меня было резкое улучшение на хромированном мобильном телефоне на нексусе 4 при удалении одной вставки-тени размером 115 пикселей (в прозрачном оверлейном div). удаление меньших теней дало пропорционально меньшее улучшение производительности. - person Amir Arad; 15.02.2014

arrow_upward
1
arrow_downward

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

Команда Chrome отключила эту функцию в Chrome 30, заявив, что:

Сопоставление селекторов CSS теперь выполняется достаточно быстро для абсолютного большинства распространенных селекторов, которые раньше были медленными во время реализации профилировщика. Это время также включено в событие Timeline Recalculate Style.

Таким образом, я считаю, что профилировщик селекторов CSS не так полезен, как он [мог бы быть] использован, и от него можно безопасно отказаться. Это также уменьшит долю разработчиков, пытающихся микрооптимизировать уже быстрые селекторы.

Вы можете попробовать использовать старую версию Chrome, чтобы разобраться в проблеме, но я бы рекомендовал взглянуть на Вкладка "Временная шкала" в текущей версии инструментов разработчика Chrome показывает, сколько времени Chrome потребовалось для расчета стилей (где это влияет на производительность селектора), компоновки и рисования страницы.

person nikmd23    schedule 13.03.2014

arrow_upward
0
arrow_downward

Opera экспериментирует с профилированием css в своем профилировщике.

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

person lulalala    schedule 16.10.2012