Chrome DevTools Timeline: новые диаграммы

в текущей версии Chrome (46) временная шкала DevTools содержит кучу новых диаграмм. Значение большинства этих карт для меня не очевидно. К сожалению, я не смог найти никакой документации по ним. Кто-нибудь может объяснить значение этих карт?

enter image description here

8
google-chrome google-chrome-devtools web-performance

1 ответов

это обзорная панель на панели хрома DevTools Timeline.

Сверху донизу:

  • желтый/зеленый клещи ввода, например, мышь двигается/нажмите, нажмите клавишу. У каждого свой цвет. Кстати, вы должны включить эксперимент Chrome DevTools, чтобы увидеть эту панель.
  • Red stripes bar-индикатор отзывчивости страницы. Если у вас есть конкретная проблема в какой-то момент, она показывает красные полосы. Обнаруженные проблемы включают длинные кадры, чрезмерные или принудительные макеты, так далее.
  • зеленая диаграмма-текущая частота кадров. Чем выше -- тем лучше. Макс 60fps.
  • следующая панель-использование ЦП. Полная высота бара означает, что 100% CPU занят. Цвета соответствуют типу активности: желтый-JavaScript, фиолетовый-стиль recalc или макет страницы, зеленый-рендеринг/живопись, синий-синтаксический анализ html или блокировка сетевых взаимодействий.
  • тонкие полосы ниже CPU являются сетевыми запросами в настоящее время в полете. Цвета изображают тип контента: синий-html, зеленый-это медиа (изображения, шрифты и т. д.), фиолетовый-css, желтый-JavaScript, серый-для всех остальных.
    • 4