[jQuery] Re: PERFORMANCE TIP: removeClass()
Here's a rough outline of the code/style in question.
My plugin will position an element in one of 16 predefined locations and add
a css class pertaining to that location (eg. location1). It knows nothing
about the element it's positioning. When it adds the location css class it
first has to remove any existing location classes (16 total) as an element
could have been previously positioned. The location css classes have no
style but are used as selectors for an element.
.location0 img.foo {
left: 0px;
}
.location1 img.foo {
left: 10px;
}
The final code in question is along the lines of:
$(element).removeClass('location0 location1 ...
location15').addClass('location' + n);
-js
On 9/19/07, Andy Matthews <[EMAIL PROTECTED]> wrote:
>
> I might argue that if you're having to add/remove 15 classes, that your
> time could be better spent optimizing your display code.
>
>
> andy
>
> --
> *From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] *On
> Behalf Of *Jonathan Sharp
> *Sent:* Wednesday, September 19, 2007 11:55 AM
> *To:* jquery-en@googlegroups.com
> *Subject:* [jQuery] PERFORMANCE TIP: removeClass()
>
>
> *Do not do:*
> $(...).removeClass('a').removeClass('b').removeClass('c');
>
> *Instead do:*
> $(...).removeClass('a b c');
>
> Same applys to addClass()
>
> I had 15 classes I had to remove and Firefox was a champ at chained
> removeClass calls, IE was taking 760ms!
>
> -js
>
[jQuery] Re: PERFORMANCE TIP: removeClass()
On Sep 19, 2007, at 1:31 PM, Stephan Beal wrote: On Sep 19, 6:55 pm, "Jonathan Sharp" <[EMAIL PROTECTED]> wrote: I had 15 classes I had to remove and Firefox was a champ at chained removeClass calls, IE was taking 760ms! If i'm not mistaken, IE takes so long in that case because it has to email the results of each function call to Microsoft for approval. Stephan, That's the funniest thing I've read on this list in a long time. thanks for brightening my day. :-) --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com
[jQuery] Re: PERFORMANCE TIP: removeClass()
On Vista at least. -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Stephan Beal Sent: Wednesday, September 19, 2007 12:31 PM To: jQuery (English) Subject: [jQuery] Re: PERFORMANCE TIP: removeClass() On Sep 19, 6:55 pm, "Jonathan Sharp" <[EMAIL PROTECTED]> wrote: > I had 15 classes I had to remove and Firefox was a champ at chained > removeClass calls, IE was taking 760ms! If i'm not mistaken, IE takes so long in that case because it has to email the results of each function call to Microsoft for approval.
[jQuery] Re: PERFORMANCE TIP: removeClass()
I might argue that if you're having to add/remove 15 classes, that your time
could be better spent optimizing your display code.
andy
_
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Jonathan Sharp
Sent: Wednesday, September 19, 2007 11:55 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] PERFORMANCE TIP: removeClass()
Do not do:
$(...).removeClass('a').removeClass('b').removeClass('c');
Instead do:
$(...).removeClass('a b c');
Same applys to addClass()
I had 15 classes I had to remove and Firefox was a champ at chained
removeClass calls, IE was taking 760ms!
-js
[jQuery] Re: PERFORMANCE TIP: removeClass()
Good rule of thumb in all programming is to keep function calls to a
minimum. Chaining is a powerful jQuery feature but it's also
expensive even in script engines that aren't as utterly awful as
IE's. This is a prime example.
Another tip that's pertinent to Javascript and jQuery is DOM access is
SLOW! Avoid it unless absolutely necessary. In this case you're
adding and removing classes. Do these classes have an impact on the
element's appearance or are they simply being used to store state? If
it's the latter case then store all the state in an array or object
instead as you can access it far more quickly than you can DOM props.
On Sep 19, 5:55 pm, "Jonathan Sharp" <[EMAIL PROTECTED]> wrote:
> *Do not do:*
> $(...).removeClass('a').removeClass('b').removeClass('c');
>
> *Instead do:*
> $(...).removeClass('a b c');
>
> Same applys to addClass()
>
> I had 15 classes I had to remove and Firefox was a champ at chained
> removeClass calls, IE was taking 760ms!
>
> -js
[jQuery] Re: PERFORMANCE TIP: removeClass()
On Sep 19, 6:55 pm, "Jonathan Sharp" <[EMAIL PROTECTED]> wrote: > I had 15 classes I had to remove and Firefox was a champ at chained > removeClass calls, IE was taking 760ms! If i'm not mistaken, IE takes so long in that case because it has to email the results of each function call to Microsoft for approval.
[jQuery] Re: PERFORMANCE TIP: removeClass()
I'm not sure how it compares but the case I'm talking about isn't simply
removing all classes. I'm removing a subset of the classes and I don't
arbitrarily know what other classes may be on the element.
-js
On 9/19/07, seedy <[EMAIL PROTECTED]> wrote:
>
>
>
> just curious how would that compare to
> $(...).attr('class','');
>
>
> Jonathan Sharp-2 wrote:
> >
> > *Do not do:*
> > $(...).removeClass('a').removeClass('b').removeClass('c');
> >
> > *Instead do:*
> > $(...).removeClass('a b c');
> >
> > Same applys to addClass()
> >
> > I had 15 classes I had to remove and Firefox was a champ at chained
> > removeClass calls, IE was taking 760ms!
> >
> > -js
> >
> >
>
> --
> View this message in context:
> http://www.nabble.com/PERFORMANCE-TIP%3A-removeClass%28%29-tf4482293s15494.html#a12781851
> Sent from the JQuery mailing list archive at Nabble.com.
>
>
[jQuery] Re: PERFORMANCE TIP: removeClass()
just curious how would that compare to
$(...).attr('class','');
Jonathan Sharp-2 wrote:
>
> *Do not do:*
> $(...).removeClass('a').removeClass('b').removeClass('c');
>
> *Instead do:*
> $(...).removeClass('a b c');
>
> Same applys to addClass()
>
> I had 15 classes I had to remove and Firefox was a champ at chained
> removeClass calls, IE was taking 760ms!
>
> -js
>
>
--
View this message in context:
http://www.nabble.com/PERFORMANCE-TIP%3A-removeClass%28%29-tf4482293s15494.html#a12781851
Sent from the JQuery mailing list archive at Nabble.com.
