Comments on: jQuery Performance Rules

By: Punkchip | Front-end developer essentials – 5 tips for efficient jQuery

Punkchip | Front-end developer essentials – 5 tips for efficient jQuery — Thu, 16 Jun 2011 13:56:34 +0000

[...] jQuery Performance Rules [...]

By: dale

dale — Sat, 22 Jan 2011 15:18:09 +0000

for #6, reiterating steve’s point is also very important – less statements for the script to go through. You can also decrement a for loop and cache your length argument outside the loop. if you do decrement, and order matters on your array, just do a .reverse() on the array before running through it. also, instead of doing string manipulation, you can also push items into an array and then .join(”) them:

var top_100_list = [...], // assume this has 100 unique strings
$mylist = $(‘#mylist’), // jQuery selects our element
top_100_ul = [''], // This will store our entire unordarered list
len = top_100_list.length; // cache the length

for (; i–;) { // must have the semi colons like a normal for loop
top_100_ul.push(” + top_100_list[i] + ”);
}
top_100_ul.push(”); // Close our unordered list
top_100_ul.join(”);
$mylist.html(top_100_li);

if i recall correctly, doing a push to an array is much faster than concatenating a string for IE. I’m not sure if that is the case for IE9 though. But i think the opposite is true when it comes to FF and Webkit – string manipulation actually is slightly faster than pushing to an array.

By: Alex

Alex — Fri, 18 Jun 2010 13:32:31 +0000

Thank you for the great tips! But I have a problem with “Leverage Event Delegation”. I am building a RIA and I am using Drupal with jQuery for that. I have a big table (really big … with around 10k cells) and also big cpu performance problems on old computers (P3s and P4s … client’s computers that I can not decide change them). I am almost sure that this problems are from the binding of different events to each cell (hover, click and dblclick) and I tried your approach to this. My problem mainly is with hover. I tried to bind hover event to the parent (the table which contains the tds) but when I hover a cell it toggles only once and it does not toggle back when the mouse is leaving cell’s region. I know for a fact that happens because I bind the action to the table and not to the cell so the browser will act when I hover out of the table and not the cell. What would your approach be to this problem?

Thanks,
Alex

By: olivvv

olivvv — Mon, 12 Apr 2010 13:40:19 +0000

hi
the “use sub-queries” advice is not always true. See for instance example 6 and 7 here :
http://www.jakearchibald.com/jsperformance/sizzle/

By: Nei

Nei — Thu, 18 Mar 2010 20:39:24 +0000

Thanks for the great post.
I had most of this questions, thank you so much!

By: Mads Jensen

Mads Jensen — Fri, 29 Jan 2010 19:09:28 +0000

Good learning experience on getting my jquery scripts perform even better! Good job!

By: buy r4 ds

buy r4 ds — Sat, 23 Jan 2010 16:26:06 +0000

Nice catch Joseph – I had meant that to use a jQuery selector for that ID. But that’s news to me on being able to pass document.getElementById(‘blah’) to the jQuery context, seems like that could be useful. Do you have any idea whether it is better performance-wise to do that rather than $(‘blah’).find(‘blah’)?

By: Paul Irish

Paul Irish — Fri, 15 Jan 2010 15:49:29 +0000

Great rules Dave, these have helped a lot of developers.
I have some more stuff about selector optimization and some other goodies in my talk on jQuery Anti-Patterns for Performance:
http://paulirish.com/perf

By: ArtzStudio

ArtzStudio — Sat, 05 Dec 2009 01:33:05 +0000

@Erik – thanks, I can’t believe I did that.

By: zsiswick

zsiswick — Fri, 04 Dec 2009 23:03:13 +0000

Thank you for the thorough article. I have had performance concerns with using jQuery on a larger production website, and I will be utilizing some of the strategies you outlined moving forward. Adding bookmark.