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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

hth

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

Answer 3

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

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

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

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

• Огромные фоновые изображения - возможно, удалите их всена мгновение?

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

Answer 4

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

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

Answer 5

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

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

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

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

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

Answer 6

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

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