With all new fancy frameworks and libraries devs used to forget about the most common performance problem og the web applications, especially for SPA - “layout thrashing”.
Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.
When you change styles the browser checks to see if any of the changes require layout to be calculated, and for that render tree to be updated. Changes to “geometric properties”, such as widths, heights, left, or top all require layout. Keep in mind and avoid layout as possible.
Layout is almost always scoped to the entire document. If you have a lot of elements, it’s going to take a long time to figure out the locations and dimensions of them all.
If it’s not possible to avoid layout then the key is to once again use Chrome DevTools to see how long it’s taking, and determine if layout is the cause of a bottleneck. Firstly, open DevTools, go to the Timeline tab, hit record and interact with your site. When you stop recording you’ll see a breakdown of how your site performed.
Let's look at the example: Optimize loop task
I have found a really good task to test the understanding how layout thrashing works (all resources will be provided at the end).
let's open the performance tab first:
We have a script that makes a drops with a number, so we want to make a drop using setInterval, and here what we can see...
Recalculation of styles makes the website much slower and the most consuming part is "Layout".
But if we change just a several lines of code, we will get a completely different picture:
Rendering time is significantly shorter than in the inital example, but what have changed? Take a look and try to guess:
Optimized solution
You have to be aware of what exactly forces layout/reflow and more about it you can find here.
The inspiration for this post - this great article and the video by JavaScript.Ninja.
Spare a bit more time for the research and you will be rewarded.
This is my first post, I hope it can be a useful clue for you,
Thank you for you time and farewell!
Top comments (0)