Background:
In the current project I am working on, I have created a jquery plugin that creates a draggable ‘google-maps’-esque map, made up of many tiles. Similar to how google map works, but without the zoom at this point.
This map plugin creates and destroys 10-20 <div> tiles per mouse being dragged one tile length using jQuery’s $('..').append, and it has decent performance. But I would like peroformance to be better in order to make the application more accessible to people with computers that have less resources.
Questions:
What can I do to maximize performance creating and destroying a large number of divs using jQuery?
Is better for performance to reuse generated <div> elements, by modifying existing ones that your going to remove, rather than to create them from scratch?
Are creating elements using generated $('<div>')s slower or faster than selecting and changing the classes and children on elements that already exist?
Creating DOM elements is expensive. Try and avoid it as much as possible. That being said, the newly released jQuery 1.4 apparently improves the performance but still avoid it if you can.
From jQuery 1.4 Released:
Yes it’s much better to reuse.