Я записываю производительность веб-сайта, в котором я сейчас работаю. Когда я проверил временную шкалу. Есть разные цвета, которые показывают (мои предположения) fps, CPU, память. Но я понятия не имею, что есть.Google Chrome Timeline
Может ли кто-нибудь объяснить, что означают эти разные цвета? Я искал, но не видел никаких пояснений по Timeline, которые имеют этот макет.
Самая верхняя полоса (красный один) является отзывчивость. Если он красный, у вас есть проблема в этом месте, например. очень длинный кадр, вызывающий зависание, чрезмерный пересчет стиля и т. д. Увеличьте область с диаграммой пламени, чтобы найти детали.
Следующий (зеленый) - частота кадров. Чем выше, тем лучше. Макс - 60 кадров в секунду.
Следующее - загрузка ЦП, его цвет зависит от типа активности, на котором в настоящий момент занят рабочий процесс. Например. много желтого означает, что он запускает код JS, фиолетовый - для recalc или макета стиля CSS и т. д.
Последняя полоса с маленькими барами - это сетевая активность. Он показывает, есть ли в настоящее время сетевые запросы.