4

Jquery allows us to use the $.css() method directly and pass the raw DOM element as the first parameter. For example, if I want to set 'a' to the width of myDiv, jQuery allows this syntax:

(OPTION 1):

var elem = document.getElementById('myDiv');
var a = $.css(elem, 'width');

instead of this (OPTION 2):

var a = $('#myDiv').css('width');

Option 1 does not require a selector, and it appears to rely on the global jQuery object instead of creating a new one. I can't find any documentation in the jQuery API or online about this method. I assume this would be a performance increase, especially when jQuery objects are required in animations. Any reason why I shouldn't be using this method?

Thanks!

EDIT: Perf tests show that option 1 is a bit faster. Doesn't seem like there's any reason not to use $.css() directly. Thanks to all for the answers!

John Caprarelli
  • 43
  • 3
  • 1
    `document.getElementById('myDiv').style.width` would probably be even faster, so why not use that ? – adeneo May 05 '13 at 02:02
  • Yet another option would be `$(document.getElementById('myDiv')).css('width')` (though I doubt that would be faster than the first one). – Felix Kling May 05 '13 at 02:04
  • In the simplified example above you would be correct, but I am creating my own custom CSS hooks, and the native JS will not work. My second option works with custom CSS styles. – John Caprarelli May 05 '13 at 02:08
  • So you can get the element with a native method, pass that element to a jQuery method that returns the value of a set style, but you can't use the native method to get the same style since you're using custom hooks. Seems like a strange way to do things to me, but whatever ? – adeneo May 05 '13 at 02:11
  • That's right. If I have a custom CSS style like 'backgroundPositionY', the native JavaScript cannot access it; so I must use jQuery's .css(). – John Caprarelli May 05 '13 at 02:38

3 Answers3

1

Yeah, the first one is slightly faster. But it can only get css value.

I made a perf test here: http://jsperf.com/jquery-css-signature You may revise it and test out other options.

Now that the facts are set, at these level of performance optimisation, I don't think it worth the overhead. Go with the more clear/maintainable way of getting the same result. The performance benefit ain't big enough to really matters in most case.

Simon Boudrias
  • 42,953
  • 16
  • 99
  • 134
  • Well, it looks like the $.css([element]) is 13% faster than $([selector]).css(). Not too much. I ran it with more divs and got about the same result. – John Caprarelli May 05 '13 at 02:49
  • Well, 13% could mean a lot on longer operation. But these two make a lot of operations per second, so yeah, the performance gain don't mean much. – Simon Boudrias May 05 '13 at 03:10
1

Anything that takes jQuery out of the equation makes it faster. By using the native getElementById instead of passing a string to be processed, you increase the speed.

Even faster would be to use the native getComputedStyle:

var elem = document.getElementById('myDiv');
var a = window.getComputedStyle(elem).width;

Note that older versions of IE use currentStyle instead, so you can normalise it like so:

window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle;};

For more information on using plain JavaScript, check out Vanilla JS

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
0

Option 2 will, after some type checking and parsing, do roughly the same thing as option 1. I can't imagine the performance difference (if any) is significant.

If you're worried about performance when referencing an element repeatedly, your best bet is to do all the lookups once, and reuse that:

var elem = $('#myDiv');

var a = elem.css('width');
elem.css('height', '100px');
// etc.
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
  • That's good to know. My specific application is I'm writing a plugin to do vertical (y axis) background animations. The animation gets the background-position style at each step of the animation, so I'm trying to reduce the overhead as much as possible. – John Caprarelli May 05 '13 at 02:25
  • I already did this for you : http://stackoverflow.com/questions/12340130/jquery-animate-background-image-on-y-axis – adeneo May 05 '13 at 02:34