Что означает каждый цвет в мониторе производительности Chrome?

Question

На картинке ниже я выбираю только один элемент - использование процессора, но вместо одной красной линии, как я и ожидал, я получаю несколько разных линий на графике.Кто-нибудь может объяснить эти цвета, пожалуйста?

Answer 1

Розовый цвет обозначает макет.Это означает, что использование вашего процессора связано с Layout шагом рендеринга.Попробуйте изменить размер окна, и вы снова получите этот розовый цвет.Оранжевый цвет для сценариев.Как указано в приведенном выше комментарии.Должен быть ключ, обозначающий назначение цвета.

Хотя мне было любопытно, что вызывает такие сложные расчеты макета, как этот.

Answer 2

Может быть, это поможет:

Вы сможете найти ключ к вашему конкретному сценарию на вкладке сводки.Как отмечает @recursive, вы найдете вкладку сводки в разделе Performance инструментов разработчика Chrome