0

I'm working on a web application, where I've built 2 UI's. One is for desktop users and another for mobile users. I thought of using Display: None; CSS property. where for larger screens or smaller screens, it will get toggled. Does this method affect the page's performance?. Is there any efficient method to handle this?

akajash
  • 97
  • 9
  • 1
    I guess you are changing display with media query . It won't affect your page performance . Another way to do this is javascript. There are third party scripts who can identify if it is mobile screen or desktop , By using you can change display style but media query is faster than this – Arjun May 01 '20 at 09:05
  • 1
    does that help @akajash – Abhisar Tripathi May 01 '20 at 09:06
  • it may be does affect little bit but not that much. However, the bootstrap is the best way for creating responsive web application because it automatically adjust the layout according to the device's screen size in a single UI. – Vatsal Patel May 01 '20 at 09:11
  • yeah, I'm doing this using media query! It works really fine. But I raised this question because I'm worried that this would affect page's loading speed – akajash May 01 '20 at 09:11

1 Answers1

1

Yes using display: none; definitely affects page performance.

display:none will remove the whole element from document flow and will lead to reflow of whole page whereas visibility:hidden hides an element but maintains the box model of the element..

Also another possible alternative is Opacity, it can be used if we want to create transparency or fade effect.

visibility:hidden vs display:none vs opacity:0

Abhisar Tripathi
  • 1,569
  • 10
  • 21
  • Thanks a lot! So concluding your statement, adding Display: none; doesn't render that part of HTML? – akajash May 01 '20 at 09:10
  • 2
    "`display:none` will remove the whole element from DOM tree" - wrong: it will stay in the DOM tree, no parent element loses any children by using `display:none`, they just won't be participate in rendering. – Peter B May 01 '20 at 09:12
  • 2
    `display:none will remove the whole element from DOM tree` no the element is still in the DOM tree, but not displayed. The difference to `visibility:hidden` is that changing visibility, will keep the area the element occupied and `display:none` does not. – t.niese May 01 '20 at 09:12