Профилировщик CSS Performance?

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

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

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

Ответ 1

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

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

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

Ответ 2

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

HTH

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

Ответ 3

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

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

Операторы filter (классические alpha=opacity и другие - IE имеет ряд очень продвинутых графических фильтров, которые чрезвычайно дороги)
Огромные элементы (например, тысячи пикселей)
Огромные фоновые изображения - возможно, на мгновение удалите их?

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

Ответ 4

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

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

Ответ 5

В инструментах Chrome dev используются CSS Selector Profiler для выполнения подобных действий. Вы можете увидеть снимки экрана в этом сообщении в блоге.

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

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

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

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

Ответ 6

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

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