Где посмотреть скорость исполнения кода?

Где посмотреть скорость исполнения кода

Краткий ответ

Для измерения скорости выполнения кода в JavaScript и на фронтенде есть несколько инструментов:

1. DevTools Performance вкладка — для профилирования всего
2. console.time() — для быстрых замеров
3. performance.now() — для точных временных меток
4. Chrome DevTools Profiler — для детального анализа
5. Lighthouse — для оценки производительности всей страницы

console.time() — самый быстрый способ

console.time('operation');

for (let i = 0; i < 1000000; i++) {
  // Код, который нужно измерить
}

console.timeEnd('operation');
// Вывод: operation: 45.123ms

Преимущества:

• Простой синтаксис
• Автоматически выводит результат в миллисекундах
• Удобно для быстрых измерений во время разработки

performance.now() — более точный способ

Для более точных измерений микросекунд:

const startTime = performance.now();

for (let i = 0; i < 1000000; i++) {
  // Код
}

const endTime = performance.now();
console.log(`Время выполнения: ${endTime - startTime}ms`);

Возвращает время в миллисекундах с плавающей точкой (точность до микросекунд):

// performance.now() вернёт что-то вроде:
1234.567891234  // микросекундная точность

Chrome DevTools Performance Вкладка

Для анализа производительности всего скрипта:

Шаги:

1. Откройте DevTools (F12 или Ctrl+Shift+I)
2. Перейдите в вкладку Performance
3. Нажмите красный круг (Record)
4. Выполните действия (клики, скроллинг, загрузка)
5. Нажмите Stop
6. Изучите Timeline

Что видно:

• Временная шкала (главный поток)
• Long tasks (красные блоки) — скрипты дольше 50ms
• Rendering (зеленый) — перерисовка экрана
• Painting (фиолетовый) — отрисовка элементов
• Network запросы
• FPS (кадры в секунду)

Измерение React компонентов

Для профилирования React:

// Оберните компонент в Profiler
import { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration) {
  console.log(`${id} (${phase}) took ${actualDuration}ms`);
}

<Profiler id="MyComponent" onRender={onRenderCallback}>
  <MyComponent />
</Profiler>

Вывод:

MyComponent (mount) took 123.45ms
MyComponent (update) took 45.67ms

Lighthouse — оценка всей страницы

Встроен в Chrome DevTools:

1. Откройте DevTools
2. Вкладка Lighthouse
3. Нажмите Analyze page load
4. Получите оценку по:
   • Performance (0-100)
   • Accessibility
   • Best Practices
   • SEO
   • PWA

Показывает метрики вроде:

• LCP (Largest Contentful Paint) — когда загружается основной контент
• FID (First Input Delay) — задержка при первом взаимодействии
• CLS (Cumulative Layout Shift) — непредвиденные смещения элементов

Memory Profiler

Для поиска утечек памяти:

1. DevTools -> Memory вкладка
2. Нажмите Take heap snapshot (снимок памяти)
3. Выполните действие
4. Возьмите второй снимок
5. Сравните (покажет, что добавилось)

Практические примеры

Измерение функции:

function calculateFibonacci(n) {
  if (n <= 1) return n;
  return calculateFibonacci(n - 1) + calculateFibonacci(n - 2);
}

console.time('fibonacci');
const result = calculateFibonacci(40);
console.timeEnd('fibonacci');
// fibonacci: 5234.567ms

Измерение DOM операций:

console.time('DOM update');
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  document.body.appendChild(div);
}
console.timeEnd('DOM update');

Сравнение подходов:

console.time('spread');
for (let i = 0; i < 100000; i++) {
  const obj = { ...baseObj, newProp: i };
}
console.timeEnd('spread'); // spread: 23.456ms

console.time('Object.assign');
for (let i = 0; i < 100000; i++) {
  const obj = Object.assign({}, baseObj, { newProp: i });
}
console.timeEnd('Object.assign'); // Object.assign: 34.567ms

Рекомендации

• Для быстрых замеров: используйте console.time()
• Для точных измерений: performance.now()
• Для поиска узких мест: Chrome DevTools Performance
• Для оценки всей страницы: Lighthouse
• Для React компонентов: React Profiler или DevTools расширение
• Избегайте console.log() при каждом обновлении — замедляет выполнение
• Помните: время в DevTools может отличаться от реального (браузер оптимизирует)