Display None helps resolve slowness on an onepage site?

Asked

Viewed 83 times

2

The site is onepage and is separated by the respective article and Section.

When scrolling, elements that are not needed (article) continue on stage but outside the limits of the browser.

Due to the accumulation of elements, the site tends to get slower.

When an article leaves the display limits of the screen, that is, it is no longer visible to the user, applying a None display will make a difference?

Or once rendered, just by removing the HTML element for better performance, at least when scrolling.

html css

  • In elements outside the view-port I am using the technique, but I created a box with fixed height so that does not affect the elements outside, it seems that helps in those Infinity-scroll, but I can not say. As far as I can see visibilty: hidden can a reasonable advantage, but all links I have found are somewhat theoretical.

2 answers

0

Felipe,

Imagine a painting. You have a white background and start drawing an apple with a lot of detail for an hour and then you completely cover with another layer of white paint. This is the visibility.

display: none it’s as if you haven’t drawn from the beginning. Of course it’s faster on the first charge.

There are disadvantages when you are using display: none However: when you are switching back to the block (or inline, etc.) you will have to start drawing the painting, but using the visibility the browser is just scratching the last coat of paint and it is back. Thus, the visibility is faster in this case.

But remember one thing when you are using visibility: Hidden the element keeps its position in the flow so that the elements around it will not yield.

If you want a technical explanation check the lecture of David Baron.

a way to optimize your site is to use the Pagespeed Tools from Google it shows you how to optimize your mobile/desktop page by passing everything that is incorrect and suggesting possible improvements.

found here Lots of DOM. Hidden vs None display

  • Friend the answer is good, but the question is far from this, the question of the author is about the rendering that occurs at client-side runtime and not with HTTP request question.

  • @Guilhermenascimento found a more focused content in this I’m making the translation to fit

  • I saw the link, I recommend that you translate it and post in the body of your answer, links may be useful, but can break in the future and the answer would be meaningless.

0

In short, no. Apply a display: none afterward that the element has already been created and rendered on the screen should not drastically affect its performance. You will basically be missing something that has already been created, and so it has required you processing time. These elements will be loaded into the DOM, so much so that you can interact with them via javascript without major problems.

On the other hand, if initially the element has the said property, all elements within it will have your render prevented, which, depending on how your page is architected, can rather bring you some benefits.

If you are looking for a solution on demand (which I don’t think is the case, given the scope of your question), in which the user only receives the content when necessary, you can use AJAX, which is done very simply using jQuery.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.