Display none help solve slowness in a onepage site?

2

The site is onepage and is separated by its article and section.

When you do scroll, the elements that do not miss (article) remain on stage but outside the limits of the browser.

Due to the accumulation of elements, the site tends to slow down.

When an article exits the display boundaries, ie no longer visible to the user, does a none display make any difference?

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

    
asked by anonymous 01.07.2015 / 19:34

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 it with another layer of white paint. This is visibility.

display: none is as if it had not been drawn from the beginning. Of course, it's faster on the first load.

There are drawbacks when you're using display: none however: when you're switching back to the block (or inline, etc) you'll have to start drawing the painting, but using visibility the browser is just scratching the last and he's back. Thus visibility is faster in this case.

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

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

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

I found here Lots of DOM. Hidden vs display none

    
01.07.2015 / 19:40
0

In short, no. Applying% w / w after that the element has already been created and rendered on the screen should not drastically affect its performance. You are basically disappearing with something that has already been created, and therefore has already required 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 the element initially has this property, all elements within it will have their render disabled, depending on how your page is architected, yes bring you some benefits.

If you are looking for an on demand solution (which I do not think is the case, given the scope of your question), where the user only receives content when needed, you can use AJAX, which is done quite simply using jQuery.

    
01.07.2015 / 20:03