Техпрогон
ВойтиНачать бесплатно
Выбор ответа Middle Производительность и Web Vitals обновлено

Почему клик откликается с задержкой

Вопрос

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

button.onclick = () => {
  spinner.hidden = false;
  heavySync();
  spinner.hidden = true;
};

Попробуйте сами

Выберите вариант, и откроется разбор.

Показать ответ и разбор

Коротко

Правильный ответ: Отрисовка ждёт конца текущей задачи, а её целиком занимает heavySync. Отрисовка происходит между задачами.

Варианты ответа

  1. Отрисовка ждёт конца текущей задачи, а её целиком занимает heavySyncправильный ответ
  2. Свойство hidden применяется только через requestAnimationFrame
  3. Обработчики onclick выполняются в Web Worker и не могут трогать DOM сразу
  4. Нужно было использовать addEventListener, тогда отрисовка была бы сразу

Разбор

Отрисовка происходит между задачами. Пока обработчик выполняется синхронно, браузер не может нарисовать кадр, а к концу спиннер уже снова скрыт. Это классический плохой INP. Лечится разбиением: показать спиннер, отдать управление (await scheduler.yield() или setTimeout), потом считать, или вынести работу в воркер. hidden применяется сразу при следующей отрисовке. Обработчики событий выполняются в главном потоке. Способ подписки на отрисовку не влияет.

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.

Потренироваться бесплатно

Предыдущий вопрос

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

Следующий вопрос

preload, prefetch, preconnect

Урок по теме

Производительность и Core Web Vitals

Термины по теме

Длинная задача (long task)CLSINPLCP

Ещё по теме «Производительность и Web Vitals»

Все вопросы модуля