Web Performance Optimisation Tips #1

Hey devs, I have started a new series for web performance optimisation. Seeing the tip may looks small but it will makes huge impact in your website.

Whenever you want to toggle visible state of a dom always use visibility property, try to avoid display property.

Let's take an example, in google search input you can see a clear icon on the right. Initially the clear icon dom will be in display none state. Once user started to type, the clear icon will be shown on the right of the search bar. To make the icon visible the display none state will be changed as display block.

Instead of using display property we can use visibility: hidden and visibility: visible.

Why we should use visibility property instead of display property. Display property add and remove the dom in document tree. But visibility property just hide and show the dom in document tree.

We will discuss this more briefly in next post.

See the paint flashing on toggling the visible state of the dom using display property.

And this is using visibility property.

Makes sense right!😀😀