Using $.css() without selector increases performance?

Question

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!

document.getElementById('myDiv').style.width would probably be even faster, so why not use that ? — adeneo
– adeneo, Commented May 5, 2013 at 2:02
Yet another option would be $(document.getElementById('myDiv')).css('width') (though I doubt that would be faster than the first one). — Felix Kling
– Felix Kling, Commented May 5, 2013 at 2: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
– John Caprarelli, Commented May 5, 2013 at 2: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
– adeneo, Commented May 5, 2013 at 2: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
– John Caprarelli, Commented May 5, 2013 at 2:38

Simon Boudrias · Accepted Answer · 2013-05-05 02:08:50Z

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.

answered May 5, 2013 at 2:08

Simon Boudrias

44.9k16 gold badges109 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Caprarelli Over a year ago

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.

Simon Boudrias Over a year ago

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.

Niet the Dark Absol · Accepted Answer · 2013-05-05 02:55:27Z

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

answered May 5, 2013 at 2:55

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

1 Comment

John Caprarelli Over a year ago

I like the Vanilla JS website. Just a LITTLE sarcasm there.

Paul Roub · Accepted Answer · 2013-05-05 02:09:29Z

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.

answered May 5, 2013 at 2:09

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

2 Comments

John Caprarelli Over a year ago

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.

adeneo Over a year ago

I already did this for you : stackoverflow.com/questions/12340130/…

Collectives™ on Stack Overflow

Using $.css() without selector increases performance?

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related