How to optimize performance when creating or deleting dozens of divs using jQuery?

Question

Background : In the current project I'm working on, I created a jquery plugin that creates a google-maps'-esque drag-and-drop map consisting of many fragments. Similar to how the google map works, but without scaling at this point.

This map plugin creates and destroys 10-20 <div>per mouse, dragging one tile length using jQuery $('..').append, and has decent performance. But I would like the recycling to be better in order to make the application more accessible for people with computers with fewer resources.

Questions:

What can I do to maximize performance and destroy a large number of divs using jQuery?

Is performance better for reusing generated elements <div>by modifying existing ones you are about to delete, rather than creating them from scratch?

Do elements generate generated $('<div>')slower or faster than selecting and changing classes and children of existing elements?

Answer 1

Creating DOM elements is expensive. Try and avoid it as much as possible. However, the recently released jQuery 1.4 seems to improve performance, but still avoid it if you can.

From jQuery 1.4 released :

jQuery("<div>") jQuery("<div/>") jQuery("<div></div>") (jQuery() , Commit)

( document.createElement), jQuery("<div></div>"). , , ( innerHTML).

, .

Answer 2

. DOM, , , .

:

http://www.artzstudio.com/2009/04/jquery-performance-rules/#limit-dom-manipulation

Answer 3

JQuery 500 IMG -tags, style -tag . , , style -tag css- JQuery. (, style -tag, .)

, ( 10-15%) IMG -tags , ( ? )

:

var start = new Date().getTime();

// Do the update here

var end = new Date().getTime();
$('#redraw').html(end - start);

HTML:

Redraw: <span id="redraw"></span>ms