Why does the browser lag on an html page with a lot of items in a flex container?

Question

css

I have a page with a flex container that contains 8 items. The size of each element is 500px by 500px. Starting from 8 elements, the browser (Safari, Chrome, Firefox) starts to noticeably slow down. 16 elements - logs. Why is this happening and are there ways to optimize?

MacBook Air 2020 on Intel, macOS 11.0.1 Big Sur, Safari 14.0.1

Answer 1

is there any way to optimize

There is. Open the browser debugger. In a normal debugger (I won’t say for Safari) there is a profiler, and in it you can see what processes are running, how many frames per second are drawn, which took how long at the time of lags.