💥 Layout Thrashing — как исправить? Это спросят на собесе!

Layout Thrashing — это перфоманс-баг, когда браузер принудительно многократно выполняет Reflow в цикле из-за чередования чтения и записи свойств layout. Например, вы в цикле читаете offsetHeight, а потом тут же меняете стиль, и так 100 раз. Браузер не успевает накопить изменения и каждый раз пересчитывает геометрию заново. Это одна из главных причин тормозов в интерфейсе. Решение — разделить чтение и запись: сначала прочитать все значения, потом применить все изменения, либо использовать requestAnimationFrame. На собеседовании Middle и Senior фронтенд-разработчика важно не только знать, что такое Layout Thrashing, но и уметь его находить и исправлять. Полный разбор стратегий оптимизации производительности — в большом видео по ссылке под этим шортсом. #layoutthrashing #frontend #frontendinterview #middle #senior #techinterview #codinginterview

Иконка канала PurpleSchool
468 подписчиков
12+
7 просмотров
2 месяца назад
12+
7 просмотров
2 месяца назад

Layout Thrashing — это перфоманс-баг, когда браузер принудительно многократно выполняет Reflow в цикле из-за чередования чтения и записи свойств layout. Например, вы в цикле читаете offsetHeight, а потом тут же меняете стиль, и так 100 раз. Браузер не успевает накопить изменения и каждый раз пересчитывает геометрию заново. Это одна из главных причин тормозов в интерфейсе. Решение — разделить чтение и запись: сначала прочитать все значения, потом применить все изменения, либо использовать requestAnimationFrame. На собеседовании Middle и Senior фронтенд-разработчика важно не только знать, что такое Layout Thrashing, но и уметь его находить и исправлять. Полный разбор стратегий оптимизации производительности — в большом видео по ссылке под этим шортсом. #layoutthrashing #frontend #frontendinterview #middle #senior #techinterview #codinginterview

, чтобы оставлять комментарии