Question

Possible Duplicate:
Jquery performance: hide() vs is(':visible') – which is faster?

Does it make sense to check (by own condition) if element is already hidden before calling jQuery.hide() function? (and analogy with jQuery.show())

Reading function source code, it seems to me, it run over, regardless of element property. Is more time expensive do check or let function set atributes over?

Answer 1

These kinds of questions are always best answered with an actual performance test and the jsperf system makes it pretty easy to test.

In a surprise to me, if the desired style is already set, then it does seem to save some performance cycles (in Chrome and Firefox) to check first before setting it.

You can see a number of different combinations here: http://jsperf.com/hide-vs-check

As the simplest comparison between these two options:

elem.style.display = "none";
elem.style.display = "none";

and

elem.style.display = "none";
if (elem.style.display !== "none") {
    elem.style.display = "none";
}

The second option is a slight bit faster. This suggests that setting the style, even when it’s already set to that value still has a significant cost and it does save time to avoid setting it when it’s not needed.

---

Or the jQuery version of the two options:

elem.style.display = "none";
elem$.hide()

and

elem.style.display = "none";
if (elem$.css("display") !== "none") {
    elem$.hide();
}

Still shows that the second option is faster when the desired state is already set.

---

But, if the state needs to be changed, then the extra test does (obviously) slow you down. The first option here is faster than the second one because the condition just costs extra time if the condition evaluates to true:

elem.style.display = "block";
elem$.hide()

and

elem.style.display = "block";
if (elem$.css("display") !== "none") {
    elem$.hide();
}