Menu
document.getElementById("elementId").style.display="none" is used in JavaScript to hide an element. But in jQuery,
$("#elementId").hide(); is used for the same purpose. Which way is more efficient? I have seen a comparison between two jQuery function .hide() and .css("display","none") here.
But my problem is whether pure JavaScript is more efficient than jQuery?
718
hide(): "The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling . css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value.
Display none don't improve the performance because the goal of virtual scrolling is reduce the number of the elements into the dom. Make an element display none or remove an element, trigger a reflow, but with display none you worst the performance because you don't have the benefit of reduce the dom.
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.
jQuery hide() Method The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.
Talking about efficiency:
document.getElementById( 'elemtId' ).style.display = 'none'; What jQuery does with its .show() and .hide() methods is, that it remembers the last state of an element. That can come in handy sometimes, but since you asked about efficiency that doesn't matter here.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
