логотип PurpleSchool
логотип PurpleSchool

Performance в JavaScript

Автор

Дмитрий Фандорин

Performance API - это набор инструментов в браузере, который позволяет измерять производительность JavaScript-кода. Он предоставляет методы для создания меток и измерений, а также для получения информации о времени выполнения задач и производительности сети.

Пример:

// Создание метки
performance.mark('myFunction-start');

// Выполнение функции
myFunction();

// Завершение метки
performance.mark('myFunction-end');

// Создание измерения
performance.measure('myFunction', 'myFunction-start', 'myFunction-end');

// Получение результатов
const perfEntries = performance.getEntriesByName('myFunction');
console.log(perfEntries[0].duration);

Форма записи

Создание меток

Для создания метки используйте метод performance.mark(name), где name - это уникальный идентификатор метки.

Пример:

performance.mark('myFunction-start');

Создание измерений

Для создания измерения используйте метод performance.measure(name, startMark, endMark), где name - это уникальный идентификатор измерения, startMark - это идентификатор начальной метки, а endMark - это идентификатор конечной метки.

Пример:

performance.measure('myFunction', 'myFunction-start', 'myFunction-end');

Способы получения меток и измерений

Для получения меток и измерений используйте методы performance.getEntries(), performance.getEntriesByName(name) или performance.getEntriesByType(type), где name - это уникальный идентификатор метки или измерения, а type - это тип записи (например, 'mark' или 'measure').

Пример:

const perfEntries = performance.getEntriesByName('myFunction');
console.log(perfEntries[0].duration);

Способы очистить записи

Для очистки всех записей используйте метод performance.clearMarks() или performance.clearMeasures().

Пример:

performance.clearMarks();
performance.clearMeasures();

Описание

Performance API предоставляет различные типы записей, такие как:

  • Метки (marks) - это идентификаторы, которые помогают измерить время выполнения определенного участка кода.
  • Измерения (measures) - это разница между двумя метками, которая позволяет измерить время выполнения определенного участка кода.

Для измерения производительности в JavaScript можно использовать Performance API, который предоставляет методы для создания меток и измерений, а также для получения информации о времени выполнения задач и производительности сети. Кроме того, существуют сторонние инструменты, такие как Google Chrome DevTools, которые предоставляют расширенные возможности для измерения производительности.

Заключение

Performance API - это мощный инструмент, который помогает измерять производительность JavaScript-кода. Использование меток и измерений позволяет измерять время выполнения определенных участков кода и идентифицировать узкие места в производительности. Кроме того, существует множество инструментов и методов оптимизации, которые помогают улучшить производительность вашего JavaScript-кода. Использование Performance API позволяет более точно и детально измерять производительность вашего кода и оптимизировать его для достижения максимальной производительности.

Стрелочка влевоprompt() в JavaScriptwindow.matchMedia в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний