Как узнать загруженность CPU в DevTools Perfomace?

Question

[Space Around]

В DevTools (инспектор), во вкладке Perfomace есть график CPU:

1. Это загруженность всего CPU или только какую нагрузку оказывает данный сайт? (А то я тестирую простенькую анимацю, а загруженность 1/3, хотя ПК норм)
   
2. Почему нет процентов? (Я должен как-то через миллисекунды рассчитывать загруженность или как? Через диспетчер задач не очень удобно отслеживать нагрузку
   

Answer 1

[Пашенька]

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

Comments

[Space Around]

like-a-boss, вкладка Performance monitor показывает какую нагрузку оказывает только данная страница?
P.S.: Изначально не было данной вкладки, поэтому и возник вопрос (гуглить пробовал, даже побывал на сайте гугла про DevTools. Возможно, плохо гугли, не спорю). Вообще, первый раз тестирую анимации, т.к. они оказали ощутимую нагрузку на пк

[Пашенька]

Максим Виксна, Некоторые из вкладок в DevTools не показаны по умолчанию. Там есть настройки и можно включить дополнительные вкладки. Нажал на три вертикальные точки:

[Space Around]

like-a-boss, доп. вопрос в комментах был изменён, посмотрит, пожалуйста!

[Пашенька]

Максим Виксна,

вкладка Performance monitor показывает какую нагрузку оказывает только данная страница?

Не уверен, но либо Хром в целом, либо вкладка. Это значения не имеет, так как при простое нагрузка должна стремиться к нулю, а при нагрузке будет заметно возрастать и давать понимание о производительности кода.

[Space Around]

like-a-boss, есть какая-то норма по загрузке, а то если смотреть на время, то всё быстро, а по CPU 10% - 15% загруженности напрягает?

[Пашенька]

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

[Пашенька]

Максим Виксна, Сухие цифры не дадут никакого представления. Они ведь относительно некоторого железа. Для понимания, я бы сделал так: взял бы какой-нибудь минимально приемлемый по производительности на сегодня аппарат типо iPhone 5s и посмотрел как на нём ведёт себя сайт. Отсюда уже и танцевать.

[Space Around]

like-a-boss, в свой проект решил добавить данную анимацию, но таких элементов на одной странице достаточно много, они заметно тормозят сайт. По коду там не велосипед, всё сделано при помощи gsap, по идеи всё должно быть максимально оптимизировано с их стороны (во всяком случае так писали на форумах). Решил почитать как быть в данной ситуации, как оптимизировать анимации, и было найдено одно подходящее решение, это останавливать движение кляксы когда она не в поле видимости, поэтому я тестирую какой метод остановки лучше всего подойдёт (т.е. меньше всего нагружает CPU). В gsap для tweenline много методов остановки анимаций, и они по разному влияют на загруженность CPU. Я как-то читал про свойства, но в данном случае меняется значения SVG

[Space Around]

like-a-boss, тем более какой смысл тестить сайт на данном этапе на мобилке, если он фризин на пк

[Пашенька]

Максим Виксна, сама по себе(одна) эта анимация почти ничего не грузит у меня.
Анимации лучше брать в основе которых лежит канвас, svg менее производителен по определению.
Если интересно, то у меня есть плагин для анимаций в замену jquery'ного метода $.animate (не для данного случая, а в целом). Легковесный, на ванильном JS. SmoothAnimate Справляется лучше, чем некоторые CSS анимации.

[Space Around]

like-a-boss, спасибо за помощь!

[Space Around]

Пашенька, в какой социальной сети Вы сидите? Я хочу поспрашивать Вас, если Вы не простив. Написал Вам в ВК, но видимо Вы там редко прибываете.

[Пашенька]

Максим Виксна, я не бываю в социалках, спрашивайте здесь.

[Space Around]

Здравствуйте, Пашенька! Вы случайно не знаете, что будет меньше нагружать CPU: на сайте есть много кнопок, к каждой из которых прикручен обработчик событий, если сделать один обработчик для всего документа и добавить switch case, то это будет также по эффективности или лучше?
P.S.: можно хотя бы Вашу почту? можете потом удалить сообщение с почтой

[Пашенька]

Максим Виксна, Один обработчик повешанный на весь документ будет есть меньше оперативной памяти, так что да, switch-case внутри - это хороший подход.

[Space Around]

Пашенька, спасибо! Можете удалять, если хотите