Почему браузер лагает на html странице с большим количеством элементов в flex-контейнере?

Question

[kennyromanov]

Есть некая страница с flex-контейнером, который содержит 8 элементов. Размер каждого элемента — 500px на 500px. Начиная с 8 элементов, браузер (Safari, Chrome, Firefox) начинает заметно подтормаживать. 16 элементов — лаги. По какой причине это происходит и есть ли способы оптимизации?

MacBook Air 2020 на Intel, macOS 11.0.1 Big Sur, Safari 14.0.1

Comments

[Ярослав Иванов]

Пример?

[Lynn «Кофеман»]

Просто от 8 элементов ничего не лагает. Ссылку на пример в студию. Может у вас там в каждом элементе тяжеленные анимации постоянно крутятся или ещё какая-то дичь происходит.

Answer 1

[Alex]

есть ли способы оптимизации

Есть. Откройте отладчик браузера. В нормальном отладчике (не скажу за Safari) есть профайлер, а в нем можно посмотреть какие процессы выполняются, сколько кадров в секунду отрисовывается, что в момент лагов занимало сколько времени.