DEV Community

Cover image for Web Performance Optimisation Tips #1
Aathishithan G
Aathishithan G

Posted on

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.

Example gif1

And this is using visibility property.

Example gif2

Makes sense right!😀😀

Top comments (1)

Collapse
 
vignesh5696 profile image
Vignesh Nagarajan

Nice point @aathishithan ​​​​👌

Adding to that,
Visibility - hides the visibility of the element but the occupied space will be there.
Display - hides both element and space.