Справочник по функциям производительности

На этой странице представлены подробные сведения о функциях DevTools, связанных с анализом производительности.

Пошаговое руководство по анализу производительности страницы с помощью средства производительности см. в статье Общие сведения о средстве производительности.

На изображениях на этой странице отображаются средства разработки, отстыкованные в отдельном выделенном окне. Дополнительные сведения о отстыковке средств разработки см. в разделе Открепить средства разработки в отдельное окностатьи Изменение размещения средств разработки (открепить, закрепить вниз, закрепить налево).

Откройте средство "Производительность"

Чтобы использовать разделы этой страницы, откройте средство "Производительность " в средствах разработки:

1. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

2. В средствах разработки на панели действий выберите вкладку Производительность . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (") .

Производительность записи

В следующих разделах описывается запись производительности веб-страницы в DevTools.

Запись производительности среды выполнения

Чтобы проанализировать производительность веб-страницы во время ее выполнения (а не во время загрузки):

1. Перейдите на веб-страницу, которую вы хотите проанализировать, например демонстрацию Фотоальбом.

2. В средствах разработки откройте средство Производительность .

3. Нажмите кнопку Запись ().

   

4. Некоторое время взаимодействуйте со страницей. DevTools записывает все действия страницы, возникающие в результате взаимодействия.

5. Нажмите кнопку Запись еще раз. Или нажмите кнопку Остановить , чтобы остановить запись.

   Средство "Производительность " отображает запись.

Производительность загрузки записей

Чтобы проанализировать производительность веб-страницы во время ее загрузки (а не во время ее выполнения):

1. Перейдите на веб-страницу, которую вы хотите проанализировать, например демонстрацию Фотоальбом.

2. В средствах разработки откройте средство Производительность .

3. Нажмите кнопку Обновить страницу ().

   

   DevTools записывает метрики производительности во время обновления страницы, а затем автоматически останавливает запись через несколько секунд после завершения загрузки. Затем DevTools отображает запись и автоматически масштабирует часть записи, где произошла большая часть действия:

   

Создание снимков экрана во время записи

Чтобы записать снимок экрана каждого кадра во время записи, установите флажок Снимки экрана :

Сведения о том, как взаимодействовать со снимками экрана, см. в разделе Просмотр снимка экрана ниже.

Принудительный сбор мусора во время записи

Чтобы принудительно выполнить сборку мусора во время записи страницы, нажмите кнопку Сбор мусора ():

Отображение параметров записи

Чтобы предоставить дополнительные параметры, связанные с тем, как DevTools записывает записи производительности, в средстве производительности нажмите кнопку Параметры захвата (). Флажки и раскрывающийся список отображаются в верхней части средства производительности :

Отключение примеров JavaScript

По умолчанию в разделе Main записи отображаются подробные стеки вызовов функций JavaScript, которые были вызваны во время записи. Чтобы отключить стеки вызовов JavaScript, выполните следующие действия:

1. В средстве Производительность нажмите кнопку Параметры записи ().

2. Установите флажок Отключить примеры JavaScript .

3. Сделайте запись страницы.

На следующих двух рисунках показана разница между отключением и включением примеров JavaScript. Основной раздел записи гораздо короче, если выборка JavaScript отключена, так как запись пропускает стеки вызовов JavaScript.

Пример записи при отключении примеров JS:

Пример записи, когда включены примеры JS:

Регулирование сети во время записи

Чтобы регулировать сеть во время записи, выполните следующие действия:

1. В средстве Производительность нажмите кнопку Параметры записи ().

2. Задайте для сети нужный уровень регулирования.

Регулирование ЦП во время записи

Чтобы регулировать ЦП во время записи:

1. В средстве Производительность нажмите кнопку Параметры записи ().

2. Задайте для ЦП нужный уровень регулирования.

Регулирование относится к возможностям компьютера. Например, при 2-кратном замедлении ЦП работает в два раза медленнее, чем обычно. DevTools действительно не имитируют процессоры мобильных устройств, так как архитектура мобильных устройств сильно отличается от архитектуры настольных компьютеров и ноутбуков.

Включение расширенного инструментирования отрисовки

Чтобы записать дополнительные сведения о отрисовке, включите расширенное инструментирование отрисовки:

1. В средстве Производительность нажмите кнопку Параметры записи ().

2. Установите флажок Включить расширенное инструментирование отрисовки (медленно).

Включив расширенное инструментирование отрисовки, DevTools записывает дополнительные сведения о отрисовке страницы, например сведения о слое и статистику селектора CSS. Производительность страницы может быть затронута.

Например, см. статьи Просмотр сведений о слоях и Просмотр статистики селектора CSS ниже.

Сохранение записи

Чтобы сохранить запись в виде файла на устройстве, щелкните запись правой кнопкой мыши и выберите Сохранить профиль:

Загрузка записи

Чтобы загрузить запись из файла, щелкните правой кнопкой мыши в средстве Производительность и выберите Загрузить профиль:

Вы можете щелкнуть правой кнопкой мыши существующую запись или экран, отображаемый в средстве Производительность , если записи отсутствуют.

Очистка предыдущей записи

После создания записи, чтобы удалить эту запись из средства Производительность , нажмите кнопку Очистить запись ().

Анализ записи производительности

После записи производительности среды выполнения или записи производительности загрузки средство производительности отображает много данных о записи. Используйте записанные данные для анализа производительности веб-страницы.

Выбор части записи

Вы можете выбрать часть записи с помощью мыши, клавиатуры или трекпада.

Мышь

Чтобы выбрать часть записи с помощью мыши, выполните следующие действия:

• Перетащите указатель мыши влево или вправо через обзор. Обзор — это раздел, содержащий диаграммы ЦП и NET:

Чтобы прокрутить длинную диаграмму пламени в главном разделе или в любом из соседних разделов, щелкните и удерживайте ее при перетаскивании вверх и вниз. Перетащите влево или вправо, чтобы переместить выбранную часть записи.

Клавиатура

Чтобы выбрать часть записи с помощью клавиатуры, выполните следующие действия:

1. Выберите фон раздела Main или фон раздела, который находится рядом с основным разделом, например Взаимодействия, Сеть или GPU. Этот рабочий процесс клавиатуры работает только в том случае, если в фокусе находится один из этих разделов.

2. Нажмите W или S , чтобы уменьшить или уменьшить масштаб. Нажмите или AD выберите для перемещения влево или вправо.

Трекпад

Чтобы выбрать часть записи с помощью трекпада, выполните следующее:

1. Наведите указатель мыши на раздел Обзор или Сведения . Раздел Обзор — это область, содержащая диаграммы FPS, ЦП и NET . Раздел Сведения — это область, содержащая раздел Main и Interactions .

2. Проведите двумя пальцами вверх, чтобы уменьшить масштаб, или вниз, чтобы увеличить масштаб. Проведите пальцем влево, чтобы переместиться влево, или вправо, чтобы переместиться вправо.

Действия поиска

Чтобы открыть поле поиска в нижней части средства производительности , выполните следующие действия:

1. Нажмите клавиши CTRL+F (Windows, Linux) или COMMAND+F (macOS).

   Поле поиска появится в нижней части средства Производительность :

   

2. Введите запрос в поле поиска, например "Перерасчет стиля", чтобы найти все действия, соответствующие запросу.

   Соответствующие действия выделяются в разделе Main при вводе, а общее количество совпадений отображается в поле поиска. Выбрано первое действие сопоставления, очерченное синим цветом:

   

Чтобы перейти между действиями, которые соответствуют запросу, выполните следующие действия:

• Чтобы выбрать следующее действие, нажмите клавишу ВВОД или нажмите кнопку Далее ().

• Чтобы выбрать предыдущее действие, нажмите клавиши SHIFT+ВВОД или нажмите кнопку Предыдущий ().

Чтобы изменить параметры запроса, выполните следующие действия:

• Чтобы сделать запрос чувствительным к регистру, нажмите кнопку с учетом регистра ().

• Чтобы использовать регулярное выражение в запросе, нажмите кнопку Regex ().

Чтобы скрыть поле поиска, нажмите кнопку Отмена .

Просмотр действия потока main

Используйте раздел Main для просмотра действий, произошедших в main потоке страницы:

Выберите событие, чтобы просмотреть дополнительные сведения о нем на вкладке Сводка . DevTools описывает выбранное событие:

DevTools представляет main действие потока с помощью диаграммы пламени:

Ось X представляет запись с течением времени. Ось Y представляет стек вызовов. Событие, которое находится рядом с верхней, вызывает события, которые находятся под ним; Например, на предыдущем рисунке событие вызвало Function Call, который запустил анонимную функцию, которая вызвала filterByCamera , а затем populateGallery.input Затем populateGallery функция внесла изменения в DOM, вызвав .set innerHTML

DevTools назначает скриптам случайные цвета. На предыдущем рисунке запросы функций из скрипта окрашены фуксией (фиолетовый-розовый). Более темный желтый цвет представляет действие скрипта, а событие purple — действие отрисовки. Эти темные желтые и фиолетовые события согласованы во всех записях.

Если вы хотите скрыть подробную диаграмму пламени запросов JavaScript, см . раздел Отключение примеров JavaScript выше. Если примеры JavaScript отключены, отображаются только события высокого уровня, например Event: input и Function Call из предыдущего рисунка.

Просмотр действий в таблице

После записи страницы в дополнение к разделу Main для анализа действий, DevTools также предоставляет три табличных представления для анализа действий. В каждом представлении вы можете по-разному взглянуть на действия.

• Чтобы просмотреть действия, на которые было затрачено больше всего времени, используйте вкладку Снизу вверх .

• Чтобы просмотреть корневые действия, которые вызывают наибольшую работу, используйте вкладку Дерево вызовов .

• Чтобы просмотреть действия в том порядке, в котором они выполнялись во время записи, используйте вкладку Журнал событий .

Действия корневого каталога

Откройте веб-страницу Демонстрация вкладок действий в новом окне или вкладке. Вкладки действий — это вкладки"Снизу вверх", "Дерево вызовов" и "Журнал событий " в нижней части средства "Производительность ". На этих вкладках отображаются корневые действия.

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

На диаграмме пламени раздела Main корневые действия находятся в верхней части диаграммы. На вкладках Дерево вызовов и Журнал событий корневые действия являются элементами верхнего уровня.

Пример корневых действий см. на вкладке Дерево вызовов ниже.

Вкладка Bottom-Up

Откройте веб-страницу Демонстрация вкладок действий в новом окне или вкладке.

Используйте вкладку "Снизу вверх ", чтобы просмотреть, какие действия непосредственно заняли наибольшее время в совокупности.

На вкладке "Снизу вверх " отображаются только действия в выбранной части записи:

Сведения о том, как выбрать часть записи, см. в разделе Выбор части записи выше.

На диаграмме пламени основного раздела предыдущего рисунка почти все время было затрачено на aвыполнение функций , bи c . На вкладке "Снизу вверх " предыдущего рисунка также aнаходятся действия , bи c. На вкладке "Снизу вверх " следующим самым дорогостоящим действием является Minor GC.

Столбец Self Time представляет агрегированное время, затраченное непосредственно в этом действии во всех вхождениях.

Столбец Общее время представляет собой агрегированное время, затраченное в этом действии или любом из дочерних элементов.

Вкладка "Дерево вызовов"

Откройте веб-страницу Демонстрация вкладок действий в новом окне или вкладке.

Используйте вкладку Дерево вызовов , чтобы просмотреть, какие корневые действия вызывают наибольшую работу.

На вкладке Дерево вызовов отображаются только действия в выбранной части записи:

Сведения о том, как выбрать часть записи, см. в разделе Выбор части записи выше.

На предыдущем рисунке элементы верхнего уровня в столбце Действие , такие как Event Timing, являются корневыми действиями. Вложенный объект представляет стек вызовов. Например, на предыдущем рисунке Event Timing вызывается Event: mouseup, который вызывает , который вызывает Function Call, который вызывает (anonymous), и т. д.

Self Time представляет время, затраченное непосредственно в этом действии. Общее время представляет время, затраченное на это действие или любой из дочерних элементов.

Щелкните Самостоятельное время, Общее время или Действие , чтобы отсортировать таблицу по столбцу.

Используйте текстовое поле Фильтр для фильтрации событий по имени действия.

По умолчанию для меню Группирование задано значение Нет группирования. Используйте меню Группирование , чтобы отсортировать таблицу действий по различным критериям.

Щелкните Показать самый тяжелый стек (), чтобы отобразить другую таблицу справа от таблицы Действия . Щелкните действие, чтобы заполнить таблицу Тяжелый стек . В таблице Тяжелый стек отображается, какие дочерние элементы выбранного действия заняли самое длительное время.

Вкладка "Журнал событий"

Вкладка Журнал событий позволяет просматривать действия в том порядке, в котором они выполнялись во время записи.

На вкладке Журнал событий отображаются только действия в выбранной части записи:

Сведения о том, как выбрать часть записи, см. в разделе Выбор части записи выше.

Столбец Время начала представляет точку, в которой началось это действие относительно начала записи. Например, время начала для выбранного 175.7 ms элемента на предыдущем рисунке означает, что действие началось через 175,7 мс после начала записи.

Столбец Self Time представляет время, затраченное непосредственно на это действие.

Столбец Общее время представляет время, затраченное непосредственно в этом действии или в любом из дочерних элементов.

Щелкните столбец Время начала, Самостоятельное время или Общее время , чтобы отсортировать таблицу по столбцу.

Используйте текстовое поле Фильтр для фильтрации действий по имени.

Используйте меню Длительность , чтобы отфильтровать все действия, которые заняли менее 1 мс или 15 мс. По умолчанию для меню Длительность задано значение Все, что означает, что отображаются все действия.

Снимите флажки Загрузка, Скрипты, Отрисовка или Рисование , чтобы отфильтровать все действия из этих категорий.

Просмотр действий GPU

Просмотрите действия GPU в разделе GPU средства "Производительность ":

Просмотр взаимодействий

Используйте раздел Взаимодействия для поиска и анализа взаимодействий с пользователем, которые произошли во время записи:

Красная линия в нижней части взаимодействия представляет время, затраченное на ожидание main потока.

Щелкните взаимодействие, чтобы просмотреть дополнительные сведения о нем на вкладке Сводка .

Анализ кадров в секунду (FPS)

DevTools предоставляет два способа анализа кадров в секунду:

• Используйте раздел Кадры , чтобы просмотреть, сколько времени занял конкретный кадр.

• Используйте счетчик FPS для оценки FPS в реальном времени при выполнении страницы. См . раздел Просмотр кадров в секунду в режиме реального времени с помощью счетчика FPS ниже.

Раздел "Кадры"

В разделе Кадры вы узнаете, сколько времени занял конкретный кадр.

Наведите указатель мыши на кадр, чтобы просмотреть подсказку с дополнительными сведениями о нем:

Выберите кадр, чтобы просмотреть дополнительные сведения о фрейме на вкладке Сводка в нижней части средства Производительность . DevTools выделяет выбранный кадр синим цветом:

Просмотр сетевых запросов

Разверните раздел Сеть , чтобы просмотреть каскад сетевых запросов, возникших во время записи:

Щелкните запрос, чтобы просмотреть дополнительные сведения о нем на вкладке Сводка :

Запросы в разделе "Сеть " имеют цветовую кодировку следующим образом:

• Синий фон: HTML-запрос.
• Фиолетовый фон: запрос CSS.
• Темно-желтый фон: запрос JS.
• Зеленый фон: запрос изображения.

Запросы имеют квадраты в левом верхнем углу:

• Более темно-синий квадрат в левой верхней части запроса означает, что это запрос с более высоким приоритетом.
• Более светлый синий квадрат означает более низкий приоритет.

Например, на предыдущем рисунке запрос фотоальбоя в левом верхнем углу раздела Сеть имеет более высокий приоритет.

Запросы могут иметь линии слева и справа, а их полосы могут быть разделены на два цвета. Вот что представляют эти линии и цвета:

• Левая линия — это все, вплоть до Connection Start группы событий, включительно. Другими словами, это все до Request Sent, эксклюзив.

• Светлая часть панели — и Request SentWaiting (TTFB).

• Темная часть панели — Content Download.

• По сути, правильная линия — это время, затраченное на ожидание main потока. Он не представлен на вкладке "Время ".

Просмотр метрик памяти

Установите флажок Память , чтобы просмотреть метрики памяти в записи производительности:

DevTools отображает новую диаграмму памяти над вкладкой Сводка . Под диаграммой NET также есть новая диаграмма, которая называется HEAP. Диаграмма HEAP содержит те же сведения, что и строка JS Heap на диаграмме Память :

Цветные линии на диаграмме сопоставляются с цветными флажки над диаграммой. Снимите флажок, чтобы скрыть эту категорию на диаграмме.

На диаграмме отображается только область выбранной записи. Например, на предыдущем рисунке на диаграмме Память отображается только использование памяти от отметки 3600 мс до отметки 6200 мс.

См. также:

• Визуализация утечек памяти (средство производительности: флажок память) ниже.

Просмотр длительности части записи

При анализе раздела , например "Сеть" или "Основной", иногда требуется более точная оценка продолжительности определенных событий. Удерживая нажатой клавишу SHIFT, щелкните и удерживайте ее и перетащите влево или вправо, чтобы выбрать часть записи. В нижней части выбранного фрагмента devTools показано, сколько времени заняла эта часть:

Просмотр снимка экрана

Сведения о том, как включить снимки экрана, см. в разделе Захват снимков экрана во время записи выше.

Чтобы просмотреть снимок экрана, показывающий, как выглядела страница в этот момент записи, наведите указатель мыши на обзор. Обзор — это раздел, содержащий диаграммы ЦП и NET:

Вы также можете просмотреть снимки экрана, выбрав кадр в разделе Кадры . DevTools отображает небольшую версию снимка экрана на вкладке Сводка :

Чтобы увеличить масштаб экрана, щелкните эскиз на вкладке Сводка .

Просмотр сведений о слоях

Чтобы просмотреть дополнительные сведения о кадре, выполните следующие действия:

1. В средстве Производительность нажмите кнопку Параметры захвата (параметры захвата) и установите флажок Включить расширенное инструментирование отрисовки (медленно).

2. В разделе Кадры выберите кадр. DevTools отображает сведения о слоях на вкладке Слои в нижней части средства производительности :

   

Вкладка Слои работает как вкладка Составные слои в инструменте трехмерного представления . Сведения о том, как взаимодействовать с вкладкой "Слои ", см. в статье Навигация по слоям веб-страницы, z-индексу и модели DOM с помощью средства трехмерного представления.

Просмотр статистики селектора CSS

Чтобы просмотреть статистику по селекторам правил CSS, которые были пересчитаны во время записи производительности, выполните следующие действия:

• В средстве Производительность нажмите кнопку Параметры захвата (параметры захвата) и установите флажок Включить расширенное инструментирование отрисовки (медленно).

  DevTools отображает агрегированные сведения о селекторах правил CSS, которые были пересчитаны во время записи на вкладке Статистика выбора :

  

1. В разделе Main (Основной ) выберите событие Recalculate Style (Перерасчет стиля ). На вкладке Статистика выбора средства разработки отображают сведения о селекторах правил CSS, которые были пересчитаны во время этого события.

Просмотр сообщений между окнами, iframes и выделенными рабочими ролей

Временная шкала эксперимента DevTools. Показать потоки отправки и обработки postMessageулучшает основной раздел средства производительности, помогая быстро идентифицировать postMessage события и обработчики, отличая события, запускаемые методомpostMessage, от других событий, отображаемых в средстве производительности. Этот эксперимент помогает исследовать проблемы с производительностью, связанные с публикацией сообщений в различных потоках приложения.

Без этого эксперимента события, которые активируются при отправке и обработке сообщений между потоками приложения, отображаются как универсальные события вызова функции скрипта. После включения этого эксперимента:

• postMessage События dispatch отображаются как Расписание postMessage.
• postMessage События обработчика отображаются как On Message:

Этот эксперимент помогает выяснить, когда postMessage произошел вызов и как долго сообщение помещалось в очередь перед запуском postMessage обработчика. События отправки связаны с событиями обработчика стрелками инициатора, которые появляются при щелчке любого типа события:

Чтобы использовать эту функцию, в DevTools выберите Настройка и управление Средствами разработки () >Параметры Эксперименты>, установите флажок Временная шкала: Показать потоки отправки и обработки postMessage, нажмите кнопку Закрыть (X) и нажмите кнопку Перезагрузить средства разработки.

См. также:

• Справочник по событиям записи производительности
• Демонстрация событий трассировки postMessage (отрисовка)
• Демонстрация событий трассировки postMessage (исходный код)

Анализ производительности отрисовки с помощью средства отрисовки

Используйте средство отрисовки , чтобы визуализировать производительность отрисовки страницы.

Чтобы открыть средство отрисовки , выполните следующие действия:

1. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

2. В средствах разработки на панели действий нажмите кнопку Дополнительные инструменты (") .

3. В раскрывающемся меню щелкните Отрисовка . Появится средство отрисовки :

   

Просмотр кадров в секунду в режиме реального времени с помощью счетчика FPS

Счетчик FPS — это наложение, которое отображается в левом верхнем углу отображаемой веб-страницы. Она предоставляет оценку FPS в режиме реального времени при выполнении страницы. Чтобы открыть счетчик FPS, выполните следующие действия:

1. Откройте средство отрисовки . См. раздел Анализ производительности отрисовки с помощью средства отрисовки выше.

2. Установите флажок Статистика отрисовки кадров . На отображаемой веб-странице отображается наложение счетчика FPS :

   

Просмотр событий рисования в режиме реального времени с помощью Paint Flashing

Используйте Flashing Paint, чтобы получить представление всех событий рисования на странице в режиме реального времени. Каждый раз, когда часть страницы перекрашивается, DevTools выделяет этот раздел зеленым цветом.

Чтобы включить мигание краски, выполните приведенные далее действия.

1. Откройте средство отрисовки . См. раздел Анализ производительности отрисовки с помощью средства отрисовки выше.

2. Установите флажок Paint Flashing (Мигание краски ). На отображаемой веб-странице отображаются зеленые контуры:

   

Просмотр наложения слоев с помощью границ слоев

Чтобы просмотреть наложение границ слоя и плиток в верхней части страницы, выполните следующие действия:

1. Откройте средство отрисовки , как описано выше в разделе Анализ производительности отрисовки с помощью средства отрисовки.

2. Установите флажок Границы слоев . Границы слоя отображаются на отрисоченной веб-странице:

   

Описание цветовых кодов см. в комментариях в debug_colors.cc .

Поиск проблем с производительностью прокрутки в режиме реального времени

Используйте флажок Проблемы с производительностью прокрутки , чтобы определить элементы страницы с прослушивателями событий, связанными с прокруткой, которая может повредить производительности страницы. DevTools описывает потенциально проблемные элементы в чайке.

Чтобы просмотреть проблемы с производительностью прокрутки, выполните приведенные далее действия.

1. Откройте средство отрисовки , как описано выше в разделе Анализ производительности отрисовки с помощью средства отрисовки.

2. Установите флажок Проблемы с производительностью прокрутки . Описываются потенциально проблемные элементы:

   

См. также:

• Медленная прокрутка прямоугольника (флажок) в навигации по уровням веб-страницы, z-индексу и модели DOM с помощью инструмента трехмерного представления.

Отключение локальных шрифтов

В средстве отрисовки установите флажок Отключить локальные шрифты , чтобы эмулировать отсутствующие local() источники в @font-face правилах.

Например, если на вашем устройстве установлен шрифт Rubik , а @font-face src правило использует его в качестве шрифта local() , Microsoft Edge использует локальный файл шрифта с вашего устройства.

Если выбран параметр Отключить локальные шрифты , Средства разработки игнорируют local() шрифты и извлекают каждый шрифт из сети:

Эта функция полезна, если во время разработки используются две разные копии одного шрифта, например:

• Локальный шрифт для средств проектирования.
• Веб-шрифт для кода.

Используйте команду Отключить локальные шрифты , чтобы упростить следующие действия:

• Отладка и измерение производительности загрузки и оптимизация веб-шрифтов.
• Проверьте точность правил CSS @font-face .
• Узнайте о различиях между локальными версиями, установленными на устройстве, и веб-шрифтом.

Визуализация утечек памяти (средство производительности: флажок "Память")

В качестве отправной точки для изучения использования памяти веб-страницы используйте флажок Память средства производительности. (Или мониторинг использования памяти в режиме реального времени (диспетчер задач браузера Microsoft Edge).)

Средство "Производительность " помогает визуализировать использование памяти страницы с течением времени.

1. В средствах разработки откройте средство Производительность .

2. Установите флажок Память .

3. Сделайте запись для каждой записи производительности выше.

Рекомендуется начинать и завершать запись принудительной сборкой мусора. Чтобы принудительная сборка мусора, нажмите кнопку сборки мусора при принудительном во время записи.

Чтобы продемонстрировать записи памяти, рассмотрите следующий код:

var x = [];
function grow() {
    for (var i = 0; i < 10000; i++) {
        document.body.appendChild(document.createElement('div'));
    }
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

При каждом нажатии кнопки, на которую ссылается код, к тексту документа добавляется 10 000 div узлов, а в массив помещается x строка из 1000 000 x символов. При выполнении предыдущего кода создается запись в средстве производительности :

Во-первых, объяснение пользовательского интерфейса. Диаграмма HEAP в области Обзор (под NET) представляет кучу JS. Под панелью Обзор находится панель Счетчик . Использование памяти разбивается по куче JS (аналогично диаграмме HEAP в области обзор ), документам, узлам DOM, прослушивателям и памяти GPU. Снимите флажок, чтобы скрыть его от графа.

Теперь анализ кода сравнивается с предыдущим рисунком. Если вы просмотрите счетчик узла (зеленый график), он будет точно совпадать с кодом. Число узлов увеличивается в дискретных шагах. Можно предположить, что каждое увеличение числа узлов является вызовом grow().

Диаграмма кучи JS (синий граф) не так проста. В соответствии с рекомендациями первым падением на самом деле является принудительная сборка мусора (нажмите кнопку сборки мусора ).

По мере выполнения записи отображаются пики размера кучи JS. Это естественно и ожидаемо: код JavaScript создает узлы DOM при каждой нажатии кнопки и выполняет большую работу при создании строки из миллиона символов.

Ключевым моментом здесь является тот факт, что куча JS заканчивается выше, чем она началась ("начало" здесь является точкой после принудительной сборки мусора). В реальном мире, если вы видите эту схему увеличения размера кучи JS или размера узла, это может указывать на утечку памяти.

См. также:

• Просмотрите метрики памяти выше.

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Кейс Баски.

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.