Почему элемент так и не показался
Вопрос
Код выполняется по клику. Что увидит пользователь?
box.style.display = 'block';
for (let i = 0; i < 1e9; i++) {} // несколько секунд работы
box.style.display = 'none';
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Варианты ответа
- Элемент появится на несколько секунд, пока идёт цикл, а потом исчезнет
- Элемент мелькнёт на один кадр сразу после клика, а потом страница зависнет
- Ничего: страница зависнет на несколько секунд, а элемент так и не появитсяправильный ответ
- Браузер прервёт цикл, чтобы отрисовать элемент, и затем продолжит работу
Разбор
Отрисовка происходит между задачами, когда стек пуст. Весь обработчик клика это одна задача: стили меняются дважды, а браузер рисует кадр только после её завершения, когда display уже снова none. Пока идёт цикл, страница не реагирует. Браузер не прерывает выполняющийся JavaScript ради рендера. Чтобы показать элемент перед тяжёлой работой, работу надо отложить в следующую задачу или вынести в воркер.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Предыдущий вопрос
requestAnimationFrame против setInterval
Следующий вопрос
Что на самом деле значит setTimeout(fn, 0)