Jquery rollout speed

Question

I have a special slideshow page with great content that I create and is starting to use a lot of event triggers. About half of them also use the livequery plugin.

I will see an increase in speed by uploading these events between slides, so only the active slide has related events?

Also, the native livequery is much faster than the livequery plugin? (because it is, of course, less functional)

There would also be something like this: http://dev.jquery.com/attachment/ticket/2698/unload.js

also cancel livequery events?

I just need to know how long it takes to unload / load the event listener depending on how many cycles they really eat if I leave them to work. Also, any information about live events would be amazing.

Answer 1

If with "native liveQuery " you mean live() , then yes, live() much faster than liveQuery() . The latter uses setInterval to periodically query the entire document tree for new elements, while the former uses event delegation .

Event delegation wins the hand. In short, live() will have one handler per document for the registered event type (e.g. click ), regardless of how many selectors you call live() with.

As for your other question, it sounds like you are snapping to each element of the slide and want to know if re-linking and snapping are again executable? I would say WRT memory, yes. WRT processor cycles, no.

To be clear, with a liveQuery() processor, the processor will never sleep.

Answer 2

I need more details to suggest valid code, but you might want to look into Event Delegation :

Delegation event refers to the use of a single event listener for a parent to listen for events occurring on its children (or deeper descendants). Event delegation allows developers to be rare in the application of event listeners, but reacting to events as they occur for very specific purposes. This is a key strategy for maintaining high performance in event-rich web projects where creating hundreds of event listeners can quickly degrade performance.

A quick, basic example:

Say you have a DIV with images, for example:

 <div id="container"> <img src="happy.jpg"> <img src="sad.jpg"> <img src="laugh.jpg"> <img src="boring.jpg"> </div> 

But instead of 4 images, you have 100 or 200. You want to bind the click event to the images so that action X is executed when the user clicks on it. For most people, the first code might look like this:

 $('#container img').click(function() { performAction(this); }); 

This will result in a load-bound event handler that will aggravate the performance of your page. With Event Delegation, you can do something like this:

 $('#container').click(function(e) { if($(e.target)[0].nodeName.toUpperCase() == 'IMG') { performAction(e.target); } }); 

This will only associate 1 event with the actual container, then you can find out what was clicked using the event target property and delegate accordingly. However, this is still a pain, and you can achieve this significant performance improvement without doing all this using the jQuery live function

 $('#container img').live('click', function() { performAction(this); }); 

Hope this helps.

Answer 3

What is it worth? We just ran a few tests on this. We created a page with a div containing several divs, each of which should have an onclick handler that displays a dialog box with its identifier.

In one case, we used DOM Level 0 event logging and defined an event handler for each directly in html for each: onclick = "_ do_click (this);". In another case, we used DOM level 2 event propagation and defined one event handler in the containing div.

What we found was on the 100,000 contained in the div, there was a slight difference in the load time on FireFox. It took a long time. In Safari, we found that DOM level 0 took twice as long as DOM level 2, but was still four times faster than any FireFox case.

So yes, this leads to better performance, but it seems that you really need to try to create a noticeable penalty.