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.
What is the difference between visibility:hidden and display:none?
display:none
means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.
visibility:hidden
means that unlike display:none
, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.
For example:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
Replacing [style-tag-value]
with display:none
results in:
test | | test
Replacing [style-tag-value]
with visibility:hidden
results in:
test | | test
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' 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!
visibility:hidden vs display:none vs opacity:0
The answer found here will answer your first question (most likely display:none
as the space is collapsed completely).
To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.
Lots of DOM. Hidden vs display none
Well in a way, they are drawn (but not really): The browser keeps space for them, so it must consider the items when laying out the visible ones.
See MDC visibility:hidden
:
The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
If you specify display: none
instead, the browser only as to care about and layout the visible ones. It does not have to take the others into account at all.
Depending on your visible/invisible ratio and the number of elements, this can make a difference.
CSS Properties: Display vs. Visibility
The visibility
property only tells the browser whether to show an element or not. It's either visible (visible
- you can see it), or invisible (hidden
- you can't see it).
The display
property tells the browser how to draw and show an element, if at all - whether it should be displayed as an inline
element (i.e. it flows with text and other inline elements) or a block
-level element (i.e. it has height and width properties that you can set, it's floatable, etc), or an inline-block
(i.e. it acts like a block box but is laid inline instead) and some others (list-item
, table
, table-row
, table-cell
, flex
, etc).
When you set an element to display: block
but also set visibility: hidden
, the browser still treats it as a block element, except you just don't see it. Kind of like how you stack a red box on top of an invisible box: the red box looks like it's floating in mid-air when in reality it's sitting on top of a physical box that you can't see.
In other words, this means elements with display
that isn't none
will still affect the flow of elements in a page, regardless of whether they are visible or not. Boxes surrounding an element with display: none
will behave as if that element was never there (although it remains in the DOM).
Do css animations affect performance while invisible
From what I checked, while it does not cause a repaint, the animation does still run and recalculates style and layout while hidden.
Here is a screenshot of such a performance recording (in Chrome). Note that this
$('element').show(); vs $('element').css('visibility', 'visible'): which is better to use?
.show()
is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
http://api.jquery.com/show/
Setting .css('visibility', 'visible')
will only show the element if it was previously hidden using visibility: hidden
. show()
changes the display
property instead. The key difference between the two methods is their layout behavior (visibility:hidden
elements still take up space in the layout, display:none
elements do not).
As for speed / performance: when in doubt, run a benchmark. Contrary to your guess, jQuery visibility is significantly faster than show/hide. In vanilla JS this difference evaporates, at least for simple document layouts; both methods are roughly the same speed (and both are much faster than either jQuery method). My results on the linked benchmark:
- jQuery show/hide x 20,913 ops/sec ±2.49% (75 runs sampled)
- jQuery visibility x 121,719 ops/sec ±1.46% (81 runs sampled)
- vanilla show/hide x 453,574 ops/sec ±2.51% (85 runs sampled)
- vanilla visibility x 450,610 ops/sec ±1.98% (89 runs sampled)
It's difficult to imagine any plausible situation in which this difference in performance would be significant; the layout difference would generally be the real deciding factor here... but if your app needs to show and hide tens of thousands of elements per second, you should run a benchmark against your actual code and find out if there are specific details about your implementation that would make one or the other preferable.
Related Topics
What's the Best Way to Make a D3.Js Visualisation Layout Responsive
How to Update State.Item[1] in State Using Setstate
What Are the Differences Between Deferred, Promise and Future in JavaScript
Difference Between Textcontent VS Innertext
Accessing Private Member Variables from Prototype-Defined Functions
Make React Useeffect Hook Not Run on Initial Render
How to Make a JSONp Request from JavaScript Without Jquery
Enabling Cross-Origin Resource Sharing on Iis7
Iterate Through Nested JavaScript Objects
Regex to Match All Instances Not Inside Quotes
Running JavaScript in Selenium Using Python
Firing Event on Dom Attribute Change
React Useeffect in Depth/Use of Useeffect
Detect Input Value Change with Mutationobserver
HTML Anchor Link - Href and Onclick Both
React: Script Tag Not Working When Inserted Using Dangerouslysetinnerhtml