Question

I am writing a jQuery plugin and I am at the optimization stage.

I wonder which of these leads to a quicker script in general, and what sort of mitigating factors are important:

1. Have the script generate lots of classes and ids at the start so finding elements in the dom is easier (quicker too?) later on.
2. Keep classes and ids to a minimum (so save time by not creating them), but then look for elements in more convoluted ways later (eg the nth item in an object), which I presume is slower than getting by id/class.

Answer 1

The question is not really specific enough so I can give you advice directly relevant to your code, but here are some of my favorite jQuery optimization tips:

1. Whenever possible, specify a context! Don’t make jQuery look places it doesn’t have to. If you know that something is going to be inside the #container div, then do $(something, '#container');
2. .myclass is slow. Internally, jQuery has to go through every single element to see if it has the class you are searching for, at least for those browsers not supporting getElementsByClassName. If you know that a class will only be applied to a certain element, it is way faster to do tag.myclass, as jQuery can then use the native getElementsByTagName and only search through those.
3. Don’t do complicated selectors in one bang. Sure, jQuery can figure out what you want, but it takes time to parse out the string and apply the logic you want to it. As such, I always like to separate my “queries” out into patches. While most people might do $('#myform input:eq(2)'); or something like that, I prefer to do $('input','#myform').eq(2); to help jQuery out.
4. Don’t re-query the DOM if you plan on doing multiple things with a set of objects. Take advantange of chaining, and if not possible to use chaining for whatever reason, cache the results of the query into a variable and perform your calls on that.