Выбор ответа Middle Рендеринг страницы обновлено
Что не так с этим циклом
Вопрос
Код заметно тормозит на сотне элементов. В чём причина?
for (const el of items) {
el.style.height = el.offsetWidth / 2 + 'px';
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Чтение offsetWidth после записи стиля заставляет пересчитывать layout на каждом шаге. Это layout thrashing: запись height делает layout устаревшим, а следующее чтение offsetWidth требует точной геометрии, и браузер синхронно пересчитывает layout.
Варианты ответа
offsetWidthвозвращает строку с единицами, и деление на каждом шаге медленное- Чтение
offsetWidthпосле записи стиля заставляет пересчитывать layout на каждом шагеправильный ответ style.heightнельзя менять в цикле: браузер честно перерисует все 100 кадров подрядfor...ofпо живой коллекции медленнее обычногоforс индексом и кешем длины
Разбор
Это layout thrashing: запись height делает layout устаревшим, а следующее чтение offsetWidth требует точной геометрии, и браузер синхронно пересчитывает layout. Так 100 раз. Лечится разделением: сначала прочитать все размеры, потом записать. offsetWidth возвращает число. Кадры рисуются не на каждую запись, браузер их группирует. Разница между видами циклов здесь несущественна.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.