Which is more performant? .hide in jquery or display: none in css.

I've been thinking about this question some more, and I figured I'd share some additional thoughts.

The jsPerf link that James Barnett provided is a good one, but it still relies on JavaScript. The element's display properties are being changed through JavaScript code, so there's still a minuscule overhead there.

It's very hard to compare the speed of CSS (which relies on the rendering engine) and JavaScript (which relies on the JavaScript engine). A slightly better scenario would be comparing the page rendering speed of two identical sites (but where one hides an element with CSS and the other with JavaScript).

Still, since jQuery (or any other JS sane method of hiding elements) relies on display: none;, the point is moot.

If you are truly worried about the performance, there's something else to consider. It's not how you apply properties to target elements, but rather how you target those elements.

CSS selectors (something that many JS libraries depend upon, including jQuery) have varying speeds. ID selectors are always the fastest. Universal selectors are slowest. Class and tag selectors are in the middle, although class selectors are a bit faster than tag selectors.

But even those speed differences are so minor that they can often be ignored.

There are some things you could do, that I consider to be good practice:

If you have a single element on the page that you do a lot of things with, give it an ID. Don't rely on classes only. If you're using jQuery (or something similar), cache the selector for that element:

var $myTargetDiv = $("#myTargetDiv");

// and then use $myTargetDiv instead of writing the selector every time you're doing things with that element

If you can (if the logic of your app/site allows it), chain the jQuery methods on the selector as much as possible.

$myTargetDiv.css('background', 'red').fadeOut('slow');
// instead of
$myTargetDiv.css('background', 'red');
$myTargetDiv.fadeOut('slow');

If elements have certain CSS properties on the page load, set those in CSS instead of JavaScript. If elements change their appearance due to user interactions, define those changes in a separate CSS class and then toggle that class on the element with jQuery, instead of applying properties (and removing them) with .css().

Both classes and IDs have their purpose, so don't be afraid of using them both.

Pseudo-class selectors can be very useful sometimes, but if you can do things without them, then don't use them. Very clever and complex selectors can often be hard to read (and usually will be slower).

And remember, even if you choose a "slower" version of doing something, the computers (and mobile devices) are so fast today that no one is likely to notice.