Нажмите кнопку записи (черная точка), чтобы начать запись производительности страницы в этот период.
нажмитеstopостановка
Анализ функций панели
Разделены на 4 области следующим образом
Зона 1: Панель управления
ScreenshotsСкриншот: флажок установлен по умолчанию, для каждого кадра будет сделан снимок экрана. После закрытия нижняя часть второй области будет удалена (там отмечен красный прямоугольник на рисунке ниже)Наблюдайте за изменением страницы, перемещаясь по временной шкале.
MemoryЗапись потребления памяти: после проверки вы можете увидеть различные кривые потребления памяти.
[Все следующие конфигурации используются для имитации мобильных телефонов и медленных сетей, вы можете пропустить, если вам это не нужно]
Disable javaScript samplesЗакройте пример javaScript: уменьшите накладные расходы при работе на мобильном телефоне, проверьте при имитации работы мобильного телефона
NetworkМоделирование сети: для моделирования в 3G, 4G и других сетевых условиях для запуска страницы.
Enable advanced paint instrumentation(slow)Запишите детали события рендеринга: выберите блок в кадрах, вы можете увидеть более четырех областейLayers
CPUОграничение ЦП: в основном для имитации производительности при работе с нижним ЦП
Область 2: Обзорная панель (обзор)
1 . FPS
FPS: кадры в секунду, стандарт анимации — 60 кадров в секунду.
☆оптимизация
Чем выше зеленый, тем лучше, красный означает, что FPS низкий (поэтому вы чувствуете, что страница зависла), вы можете изменитьFramesСм. конкретное значение FPS (см. второе изображение ниже).
☆тестовое задание
Нажмите кнопку ADD 10 в DEMO несколько раз, пока не почувствуете, что изображение не является гладким, и начните запись анализа следующим образом.
Нажмите на квадрат, чтобы увидеть 18 кадров в секунду за 57,1 мс.
2 . CPU
CPU: Время, затраченное на обработку каждой задачи, выбрать раздел статистики ЦП можно в четвертой области.Summaryпосмотреть таблицу статистики
Scriptingсценарий
Renderingоказывать
Paintingрисовать
Loadingнагрузка
ldleпраздный
☆оптимизация
Цвета с большой пропорцией могут быть проблематичными, например, фиолетовая часть на картинке выше.Rendering, что указывает на то, что рендеринг занимает много времени
3 . NET
NET: время, потраченное на каждый запрос
Этот кусок может бытьnetworkСмотря, некоторые более четко
Область 3: Панель потоков
1 . Frames
Frames: Поток кадров, можно посмотреть fps, наведя мышку на зеленый блок
2. Main
Main: основной поток, отвечающий за выполнение Javascript, анализ HTML/CSS и завершение рисования.
Вы можете увидеть стек вызовов основного потока и время, каждая полоса представляет собой событие, и вы можете увидеть время и имя события, наведя курсор
Ось x относится ко времени
Первая строка вверху — это место, где запускается событие, до конца эта строка самая длинная.
Ось Y относится к стеку вызовов
Вышеприведенное событие вызывает следующие подсобытия, чем меньше число, тем меньше (водопад)
Цвета представляют каждый тип события, некоторые распространенные перечислены ниже.
3. Raster
Raster: растровая нить, отвечающая за завершение отрисовки слоя или некоторых тайлов.
Зона 4: Панель статистики
Выбор панели статистики. Содержание статистики отличается из-за щелчка для выбора разных целей.
SummaryСтатистический график: показывает время, проведенное на каждом этапе события.
Bottom-UpСортировка: вы можете увидеть трудоемкую сортировку каждого события.
(1)self-timeОтносится ко времени, затрачиваемому самим событием на удаление подсобытия.
(2)total-timeПрошедшее время от начала до конца этого события (включая дополнительные события)
Call Treeстек вызовов:MainВыберите событие, чтобы увидеть стек вызовов всего события (сверху вниз, а не только текущее событие)
Event LogЖурнал событий
(1) более одногоstart time, что указывает на то, через сколько миллисекунд начинается запуск события.
(2) Справа есть описание события.