Как диагностировать рывки во время выполнения (runtime jank), длинные задачи и плохой INP?

Question

IT Interview Practice · Accepted Answer

Рывки во время выполнения возникают из-за **длинных задач, блокирующих главный поток** — единственный поток, который обрабатывает JS, layout, paint и ввод. Когда задача выполняется слишком долго, ввод не может быть обработан, поэтому взаимодействия ощущаются замороженными, а **INP** растёт.

## Основная модель: главный поток

```text
Главный поток: [ обработчик события 180мс ]  ввод в очереди... отрисовано ─▶ INP = время до следующей отрисовки
             └── «длинная задача» (>50мс) блокирует всё, включая ответ на клик
```

INP измеряет задержку от взаимодействия пользователя до следующей отрисовки. У неё три части: **задержка ввода** (главный поток занят при клике), **время обработки** (ваш обработчик) и **задержка представления** (style/layout/paint после).

## Диагностика

- **Панель Performance** (Chrome DevTools): запишите взаимодействие, ищите отмеченные красным **Long Tasks** (>50мс) и широкие кадры обработчиков.
- **PerformanceObserver**, чтобы ловить длинные задачи в поле:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // находим блокировки у реальных пользователей
  }
}).observe({ type: "longtask", buffered: true });
```

## Исправления

- **Разбивайте длинные задачи** — дробите работу и уступайте (yield), чтобы ввод мог прервать:

```js
async function process(items) {
  for (const item of items) {
    doWork(item);
    if (navigator.scheduling?.isInputPending?.()) await yieldToMain(); // пропускаем клики
  }
}
const yieldToMain = () => new Promise((r) => setTimeout(r, 0));
```

- **Переносите тяжёлые вычисления в Web Worker** — держите парсинг/расчёты вне главного потока.
- **Debounce/throttle** дорогих обработчиков; **виртуализируйте** длинные списки; мемоизируйте, чтобы урезать перерисовки.
- **Откладывайте несрочную работу** через `requestIdleCallback` или приоритеты `scheduler.postTask`.

## Почему это важно

INP — новейший Core Web Vital и самый трудный для исправления, потому что он про *время выполнения*, а не загрузку. От senior-ов ожидают рассуждений от однопоточной модели — длинные задачи блокируют ввод — и обращения к уступанию (yielding), воркерам и планированию, а не просто «оптимизируйте код».

Основная модель: главный поток

Диагностика

Исправления

Почему это важно

Похожие вопросы