Css Properties: Display Vs. Visibility

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

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).

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.

$('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.

which is better?visibility property or display property of an element in html?

The properties visibility and display are not the same.

Visibility hides the element but it will continue to affect the layout of the page.

Display will hide the element and will not affect the layout.

In terms of speed, the difference would be negligible. So you should focus on which affects the usability of the site.

what is the difference between visibility and display in css?

In layman's terms, visibility determines if the element is rendered on screen but does not affect how layout is performed (i.e. how the browser calculates where each element goes on the screen and how much space it takes up).

On the other hand, display specifically controls how the element is laid out on the page; this affects its visible status "as a side effect" because display: none means "do not include this element in the layout at all".

For a more technically-oriented explanation you should look up the documentation for these properties on MDN (visibility, display) or read the W3C specification (here and here).

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.