Где и как ты будешь смотреть, сколько времени рендерится компонент?

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

1. Инструменты разработчика браузера (Chrome DevTools)

   • Вкладка Performance позволяет записать сессию и увидеть, сколько времени занимает рендеринг, выполнение скриптов и другие этапы.

2. React Profiler (если используется React)

   • В React DevTools есть вкладка Profiler, которая показывает время рендеринга каждого компонента и сколько раз он обновлялся.

3. Встроенные API для измерения времени

   • Можно использовать performance.now() для замера времени начала и окончания рендеринга.

Пример с React Profiler:

import React, { Profiler } from 'react';

function onRenderCallback(
  id, // идентификатор профилируемого компонента
  phase, // "mount" или "update"
  actualDuration // время, затраченное на рендеринг
) {
  console.log(`${id} ${phase} took ${actualDuration}ms`);
}

function MyComponent() {
  return (
    <Profiler id="MyComponent" onRender={onRenderCallback}>
      {/* содержимое компонента */}
    </Profiler>
  );
}

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