There are may real cases where FlexBox is used for layout of website and web pages. But, somebody may worry about the performance of FlexBox. In this post, I focus on FlexBox performance and try to share my experience with you.

My idea is to build a random flexbox layout generator and check the performance of the page. In this case I have to use pur HTML page to test the FlexBox performance.

Sliding that range slider around regenerates the random flexbox layout. The further to the right, the more. So far, I haven't been able to find anything terribly taxing. However, my little demo there isn't exactly "real world". Perhaps images inside there are problematic. Perhaps using the flexbox properties to change source order is what is taxing. Perhaps old flexbox is the culprit. Perhaps there is nothing to be worried about at all.

If you have any ideas on how to replicate some bad performance around flexbox, feel free to fork my generator thingy and add/change what is needed to make it happen.

The best way I know of to actually measure the performance is the Chrome Dev Tools > Timeline. Then hit the "Record" button, slide the slider around, and stop. Then look around the timeline for long paint times. Like this:

The purple there is layout, which is fast in this case (so far).