Does 'display:none' improve or worsen performance?
The "display: none"
property of an Element removes that element from the document flow.
Redefining that element display property from none to any other dynamically, and vice versa, will again force the change in document flow.
Each time requiring a recalculation of all elements under the stream cascade for new rendering.
So yes, a "display: none"
property applied to a nonzero dimensional and free flow or relatively positioned element, will be a costly operation and therefore will worsen the performance!
This will not be the case for say position: absolute
or otherwise, removed elements form the natural and free document flow who's display property may be set to none and back without triggering e re-flow on the body of the document.
Now in your specific case [see edited graph] as you move/scroll down bringing the 'display: block' back to the following div will not cause a re-flow to the rest of the upper part of the document. So it is safe to make them displayable as you go. Therefore will not impact the page performance. Also display: none
of tail elements as you move up, as this will free more display memory. And therefore may improve the performance.
Which is never the case when adding or removing elements from and within the upper part of the HTML stream!
Does display:none still use performance of rendering
Yes , sure, whatever status the "display" attribute is, the flash resource(including regular image, or a music, or something else) will be always rendered.
For my experience, the "display" attribute has no business with "eager/delay loading". If you want to render an object at the last moment, I suggest you use javascript or some other approach.
Performance differences between visibility:hidden and display:none
I'm not aware of any performance difference between display:none
and visibility:hidden
- even if there is, for as little as 10 elements it will be completely negligible. Your main concern should be, as you say, whether you want the elements to remain within the document flow, in which case visibility
is a better option as it maintains the box model of the element.
Will the browser parse / pre-render / paint display:none HTML?
display: none
will not prevent the browser from parsing/loading that markup and associated resources (EDIT by Steven Moseley: tested this and found that display:none will actually prevent the browser from painting the HTML, i.e. applying CSS to the elements inside the hidden div, and will only do the work to parse the HTML to construct the DOM, which will in fact give a performance advantage). It is simply not rendered as part of the page flow until its display
value changes. Generally speaking display: none
and visibility: hidden
have little or no impact on page load time. The main venue for optimization / performance with display: none
involves selectively choosing when to display it since that triggers a reflow/rerender of page content, and even that is usually a negligible difference in all but very complex applications.
If you want to wait to load the content until it's needed, don't include it at all (or include empty div placeholders) and then use AJAX to fetch the content from the server once it's needed after page load and add it to the page with JS. jQuery makes this very simple with its built in AJAX functions.
Display:none takes 500ms or more - is there a faster way?
Strangely enough, adding the class hidden
takes far longer then simply adding the attribute display:none
in Chrome. Calling jQuery's hide()
actually adds the style to the element, instead of adding the new class. Even though both accomplish basically the same thing, one strangely takes drastically longer than the other. I guess Chrome tries to rerender the whole thing if I add the class, and then hide it. But if I just add display:none
, it realizes that I just want to hide it, and does not rerender.
Which one is best optimized code display:none or visibility:hidden as per the performance?
visibility:hidden
would be the more efficient as it does not change the flow of the DOM, reducing the amount of redraws.
Switching an element's display
property would cause greater redrawing as space isn't allocated for the element. This would occur most with stacked elements.
Does display:none prevent an image from loading?
Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful.
The image has a display:none
style but its size may be read by the script.
Chrome v68.0 does not load images if the parent is hidden.
You may check it there : http://jsfiddle.net/tnk3j08s/
You could also have checked it by looking at the "network" tab of your browser's developer tools.
Note that if the browser is on a small CPU computer, not having to render the image (and layout the page) will make the whole rendering operation faster but I doubt this is something that really makes sense today.
If you want to prevent the image from loading you may simply not add the IMG element to your document (or set the IMG src
attribute to "data:"
or "about:blank"
).
Related Topics
When Do Nested Child Elements Expand Their Parent Elment
Flex-Box Box-Sizing: Border-Box Not Working
Overflow:Hidden Does Not Work in Safari
Cannot Find Definitions of Editor-Label and Editor-Field in MVC 4, Did Ms Remove It? Why
CSS Selector for Only Two Classes and No Others
How to Create a Row of Justified Elements with Fluid Spacing Using CSS
Background Image Not Found from My CSS File
How to Align One Item in The Ol to The Right While The Others Are on The Left
Are There a CSS Property That Would Change Nothing and Where We Can Store Information
Hover Effect on Another Class in CSS
CSS: Selecting Table's <Td> Without The <Td>S of Nested Tables
Next-Sibling Combinator Should Not Work with Complex Selectors
Mix-Blend-Mode Doesn't Work on Chrome
Dynamically Changing Font, Font-Size, Font-Color, and So on in Vaadin Flow Web Apps
How to Create a Partial Border(With a Hole)
Select: Last-Child with Especific Class Name (With Only CSS)
Maintain Width and Height of Rotated Square Divs in CSS Grid (Responsive Solution)