[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.
[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()
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()
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()
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 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()
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()
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
No, because then people might think it was just because of jQuery that a
looped function call is slow.
The avoidance of repeated unnecessary function calling inside loops is
something that any programmer in any language should look at and immediately
say Yuck! :-D
--rob
On 5/24/07, Jean Nascimento [EMAIL PROTECTED] wrote:
I´m a javascript nooba, so thanks for the tip :D
On 5/23/07, Gordon [EMAIL PROTECTED] wrote:
It is one of those blindingly obvious things but also easy to forget.
I suppose the tip should be if you find $ in a loop, find a way to
cache it.
On May 23, 4:43 pm, Rob Desbois [EMAIL PROTECTED] wrote:
Absolutely, no loop should call a determinate function with the same
argument(s) on every iteration.
In other words, if a function is called in a loop and it will return
the
same value for each iteration take it OUT of the loop.
Also Gordon, remember that no more memory is used here - in the slow
version
the result from .children() has to be cached somewhere in a temporary
variable internally (I would guess, my knowledge of JS internals is
minimal). Making the temporary variable explicit will use no
additional
memory.
--rob
On 5/23/07, Gordon [EMAIL PROTECTED] wrote:
This one's probably blindingly obvious to anyone with any
significant
programming experience in javascript, but it's an easy one to forget
too.
Consider this code:
function fast ()
{
var myDivItems = $('#myDiv').children();
for (x = 0; x 1000; x++)
{
myDivItems.length;
}
}
function slow ()
{
for (x = 0; x 1000; x++)
{
$('#myDiv').children().length;
}
}
Both are functionally identical, but try profiling their run times
in
Firebug!
Here's the average run times I got from running each function 5
times
fast: 3.125ms
slow: 3146.875ms
One more line of code, a bit more memory used, but huge win in
loops.
--
Rob Desbois
Eml: [EMAIL PROTECTED]
Tel: 01452 760631
Mob: 07946 705987
There's a whale there's a whale there's a whale fish he cried, and
the
whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
--
[]´s Jean
www.suissa.info
Ethereal Agency
www.etherealagency.com
--
Rob Desbois
Eml: [EMAIL PROTECTED]
Tel: 01452 760631
Mob: 07946 705987
There's a whale there's a whale there's a whale fish he cried, and the
whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
[jQuery] Re: Performance tip
Sorry I´m in dependency on Analysis of Algorithm for second time LOL
ps: is true.
On 5/24/07, Rob Desbois [EMAIL PROTECTED] wrote:
No, because then people might think it was just because of jQuery that a
looped function call is slow.
The avoidance of repeated unnecessary function calling inside loops is
something that any programmer in any language should look at and immediately
say Yuck! :-D
--rob
On 5/24/07, Jean Nascimento [EMAIL PROTECTED] wrote:
I´m a javascript nooba, so thanks for the tip :D
On 5/23/07, Gordon [EMAIL PROTECTED] wrote:
It is one of those blindingly obvious things but also easy to forget.
I suppose the tip should be if you find $ in a loop, find a way to
cache it.
On May 23, 4:43 pm, Rob Desbois [EMAIL PROTECTED] wrote:
Absolutely, no loop should call a determinate function with the same
argument(s) on every iteration.
In other words, if a function is called in a loop and it will return
the
same value for each iteration take it OUT of the loop.
Also Gordon, remember that no more memory is used here - in the slow
version
the result from .children() has to be cached somewhere in a temporary
variable internally (I would guess, my knowledge of JS internals is
minimal). Making the temporary variable explicit will use no
additional
memory.
--rob
On 5/23/07, Gordon [EMAIL PROTECTED] wrote:
This one's probably blindingly obvious to anyone with any
significant
programming experience in javascript, but it's an easy one to forget
too.
Consider this code:
function fast ()
{
var myDivItems = $('#myDiv').children();
for (x = 0; x 1000; x++)
{
myDivItems.length;
}
}
function slow ()
{
for (x = 0; x 1000; x++)
{
$('#myDiv').children().length;
}
}
Both are functionally identical, but try profiling their run times
in
Firebug!
Here's the average run times I got from running each function 5
times
fast: 3.125ms
slow: 3146.875ms
One more line of code, a bit more memory used, but huge win in
loops.
--
Rob Desbois
Eml: [EMAIL PROTECTED]
Tel: 01452 760631
Mob: 07946 705987
There's a whale there's a whale there's a whale fish he cried, and
the
whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
--
[]´s Jean
www.suissa.info
Ethereal Agency
www.etherealagency.com
--
Rob Desbois
Eml: [EMAIL PROTECTED]
Tel: 01452 760631
Mob: 07946 705987
There's a whale there's a whale there's a whale fish he cried, and the
whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
--
[]´s Jean
www.suissa.info
Ethereal Agency
www.etherealagency.com
[jQuery] Re: Performance tip
Absolutely, no loop should call a determinate function with the same
argument(s) on every iteration.
In other words, if a function is called in a loop and it will return the
same value for each iteration take it OUT of the loop.
Also Gordon, remember that no more memory is used here - in the slow version
the result from .children() has to be cached somewhere in a temporary
variable internally (I would guess, my knowledge of JS internals is
minimal). Making the temporary variable explicit will use no additional
memory.
--rob
On 5/23/07, Gordon [EMAIL PROTECTED] wrote:
This one's probably blindingly obvious to anyone with any significant
programming experience in javascript, but it's an easy one to forget
too.
Consider this code:
function fast ()
{
var myDivItems = $('#myDiv').children();
for (x = 0; x 1000; x++)
{
myDivItems.length;
}
}
function slow ()
{
for (x = 0; x 1000; x++)
{
$('#myDiv').children().length;
}
}
Both are functionally identical, but try profiling their run times in
Firebug!
Here's the average run times I got from running each function 5 times
fast: 3.125ms
slow: 3146.875ms
One more line of code, a bit more memory used, but huge win in loops.
--
Rob Desbois
Eml: [EMAIL PROTECTED]
Tel: 01452 760631
Mob: 07946 705987
There's a whale there's a whale there's a whale fish he cried, and the
whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
[jQuery] Re: Performance tip
It is one of those blindingly obvious things but also easy to forget.
I suppose the tip should be if you find £ in a loop, find a way to
cache it.
On May 23, 4:43 pm, Rob Desbois [EMAIL PROTECTED] wrote:
Absolutely, no loop should call a determinate function with the same
argument(s) on every iteration.
In other words, if a function is called in a loop and it will return the
same value for each iteration take it OUT of the loop.
Also Gordon, remember that no more memory is used here - in the slow version
the result from .children() has to be cached somewhere in a temporary
variable internally (I would guess, my knowledge of JS internals is
minimal). Making the temporary variable explicit will use no additional
memory.
--rob
On 5/23/07, Gordon [EMAIL PROTECTED] wrote:
This one's probably blindingly obvious to anyone with any significant
programming experience in javascript, but it's an easy one to forget
too.
Consider this code:
function fast ()
{
var myDivItems = $('#myDiv').children();
for (x = 0; x 1000; x++)
{
myDivItems.length;
}
}
function slow ()
{
for (x = 0; x 1000; x++)
{
$('#myDiv').children().length;
}
}
Both are functionally identical, but try profiling their run times in
Firebug!
Here's the average run times I got from running each function 5 times
fast: 3.125ms
slow: 3146.875ms
One more line of code, a bit more memory used, but huge win in loops.
--
Rob Desbois
Eml: [EMAIL PROTECTED]
Tel: 01452 760631
Mob: 07946 705987
There's a whale there's a whale there's a whale fish he cried, and the
whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
[jQuery] Re: Performance tip
It is one of those blindingly obvious things but also easy to forget.
I suppose the tip should be if you find $ in a loop, find a way to
cache it.
On May 23, 4:43 pm, Rob Desbois [EMAIL PROTECTED] wrote:
Absolutely, no loop should call a determinate function with the same
argument(s) on every iteration.
In other words, if a function is called in a loop and it will return the
same value for each iteration take it OUT of the loop.
Also Gordon, remember that no more memory is used here - in the slow version
the result from .children() has to be cached somewhere in a temporary
variable internally (I would guess, my knowledge of JS internals is
minimal). Making the temporary variable explicit will use no additional
memory.
--rob
On 5/23/07, Gordon [EMAIL PROTECTED] wrote:
This one's probably blindingly obvious to anyone with any significant
programming experience in javascript, but it's an easy one to forget
too.
Consider this code:
function fast ()
{
var myDivItems = $('#myDiv').children();
for (x = 0; x 1000; x++)
{
myDivItems.length;
}
}
function slow ()
{
for (x = 0; x 1000; x++)
{
$('#myDiv').children().length;
}
}
Both are functionally identical, but try profiling their run times in
Firebug!
Here's the average run times I got from running each function 5 times
fast: 3.125ms
slow: 3146.875ms
One more line of code, a bit more memory used, but huge win in loops.
--
Rob Desbois
Eml: [EMAIL PROTECTED]
Tel: 01452 760631
Mob: 07946 705987
There's a whale there's a whale there's a whale fish he cried, and the
whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
[jQuery] Re: Performance tip
I´m a javascript nooba, so thanks for the tip :D
On 5/23/07, Gordon [EMAIL PROTECTED] wrote:
It is one of those blindingly obvious things but also easy to forget.
I suppose the tip should be if you find $ in a loop, find a way to
cache it.
On May 23, 4:43 pm, Rob Desbois [EMAIL PROTECTED] wrote:
Absolutely, no loop should call a determinate function with the same
argument(s) on every iteration.
In other words, if a function is called in a loop and it will return the
same value for each iteration take it OUT of the loop.
Also Gordon, remember that no more memory is used here - in the slow version
the result from .children() has to be cached somewhere in a temporary
variable internally (I would guess, my knowledge of JS internals is
minimal). Making the temporary variable explicit will use no additional
memory.
--rob
On 5/23/07, Gordon [EMAIL PROTECTED] wrote:
This one's probably blindingly obvious to anyone with any significant
programming experience in javascript, but it's an easy one to forget
too.
Consider this code:
function fast ()
{
var myDivItems = $('#myDiv').children();
for (x = 0; x 1000; x++)
{
myDivItems.length;
}
}
function slow ()
{
for (x = 0; x 1000; x++)
{
$('#myDiv').children().length;
}
}
Both are functionally identical, but try profiling their run times in
Firebug!
Here's the average run times I got from running each function 5 times
fast: 3.125ms
slow: 3146.875ms
One more line of code, a bit more memory used, but huge win in loops.
--
Rob Desbois
Eml: [EMAIL PROTECTED]
Tel: 01452 760631
Mob: 07946 705987
There's a whale there's a whale there's a whale fish he cried, and the
whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
--
[]´s Jean
www.suissa.info
Ethereal Agency
www.etherealagency.com
