Инструмент даёт Вам понять общую отзывчивость вашего сайта, JavaScript и общее представление о разметке. С помощью инструмента производительности Вы создадите запись или профиль своего сайта за определенный промежуток времени. Затем, инструмент покажет Вам действия браузера и график смены частоты кадров, поверх профиля, рендера Вашего сайта.
Вы получите четыре набора инструментов для более подробного изучения аспектов профиля:
- Waterfall (Водопад) показывает различные операции браузера, например, выполняет макет, JavaScript, перерисовывает и собирает мусор
- Call Tree (Дерево вызова) показывает функции JavaScript, в которых браузер провел большую часть своего времени
- Flame Chart (Пламенный График) показывает стек вызовов JavaScript над конечной записью.
- Allocations. В этом представлении отображаются распределения кучи, сделанные вашим кодом в ходе записи. Это представление появляется только в том случае, если вы отметили «Записать выделение» в настройках инструмента «Производительность».
Приступая к работе
- UI Tour (Пользовательский интерфейс)
-
Чтобы найти свой вариант производительности инструмента, вот краткий обзор пользовательского интерфейса UI.
- How to (Как)
- Основные задачи: откройте инструмент создать, сохранить, загрузить и настроить записи.
Компоненты инструмента производительности
- Frame rate (Частота кадров)
- Исследование Вашего сайта на отзывчивость.
- Call Tree (Дерево вызовов)
- Поиск узких мест Вашего сайта на JavaScript.
- Waterfall (Водопад)
- Исследует работу браузера на взаимодействие пользователей с Вашим сайтом.
- Flame Chart (Диаграмма)
- Обзор выполнения функций JavaScript во времени.
- Allocations (Распределение)
- Просмотр распределений сделанных вашим кодом во время записи.
Сценарии
- Animating CSS properties (Свойства анимации CSS)
- Использует водопад чтобы понять как браузер обновляет страницу, и как меняя разные свойства CSS можно улучшить производительность.
- Intensive JavaScript (Интенсивный JS)
- Использует частоту кадров и инструменты водопада для выделения проблем с производительностью, вызванные длительной загрузкой JavaScript и каким образом с помощью инструментов разработчика возможно исправить ситуацию.