Знаете утилиту для анализа времени обработки отдельных CSS-свойств?

Question

[Xrist1An]

Как определить, какие строчки CSS кода тратят больше всего времени на загрузку страницы? Хотелось бы найти такую утилиту, которая бы показывала мне, что вот на обработку, например, background-image: url('image.jpg'); ушло столько-то секунд, и исходя из этого я нашел бы проблемные места в оптимизации.

При определенных условиях сильно замедляется прокрутка страницы (скролл с рывками и медленный). Я почти уверен, что дело в CSS, но что именно вызывает эту проблему, я не могу определить.

Спасибо.

Answer 1

[xaja]

утилита для анализа времени. тьфу. да пока писали этот вопрос все уже выяснить можно было. руками, теплым ламповым способом. Рассказываю:

1. на глаз удаляете половину .css файла. скролл перестал тормозить? значит проблема в этой половине .css
2. восстанавливаете css (ctrl+z)
3. удаляете половину из этой половины.....
4. ???
5. профит! буквально за минуту находите строку, которая все гробит.
6. далее удаляете полстроки...

Comments

[Xrist1An]

Способ, безусловно, практичный и если бы я не нашел решения, то так бы и сделал. Но это не модно :)

[Krickt]

@xaja ага, удобно, когда css в 1000 и больше строк...

Answer 2

[Игорь Воротнёв]

Есть еще такая штука как repaint.

Почитайте:
www.html5rocks.com/en/tutorials/speed/scrolling
www.html5rocks.com/en/tutorials/speed/unnecessary-...

А вот интересный фикс:
www.thecssninja.com/javascript/pointer-events-60fps

Comments

[Xrist1An]

Спасибо!

Answer 3

[Евгений]

Для отдельный строк такого нет, потому что обработка любого CSS файла вменяемых размеров происходит за миллисекунды. Проанализировать скорость загрузки страницы в целом, можно при помощи Developer Tool браузера Chrome, вкладка Developer Tool:

Comments

[Xrist1An]

Про это я знал, спасибо. Но я нашел в чем проблема. Как оказалось - background-size: cover;

Answer 4

[Krickt]

При определенных условиях сильно замедляется прокрутка страницы (скролл с рывками и медленный). Я почти уверен, что дело в CSS, но что именно вызывает эту проблему, я не могу определить.

А вас не смущает, что браузер 1 раз рендерит страницу, а не во время скроллинга? При чем тут вообще CSS?

Comments

[Xrist1An]

А притом, что именно из-за нее, а в частности "background-size: cover;" появляются лаги при прокрутке. Я не сказал, что само по себе CSS виновата поэтому и просил утилиту для анализа различных кусков кода и уже в них искать проблемы.

Нет, не смущает. Надо вопросы читать внимательнее.

[Krickt]

@Xrist1An "Я почти уверен, что дело в CSS", "Я не сказал, что само по себе CSS виновата" - яяясно )))

[Xrist1An]

"в" - имелось ввиду, что какая отдельная строчка или группа строчек в коде... а хотя нафига я объясняю. Проверь еще мое сообщение на орфографию, пожалуйста, задрот.