Best way to sort DOM elements in buckets on a web page using JavaScript

I am facing an issue where I need to sort elements based on different views maintaining a bunch of buckets varying view by view.

For example, View 1 looks something like this:

Bucket A:
1
4
Bucket B:
23
25
Bucket C:
9
14

And view 2 may look like:

Bucket A:
1
4
9
14
23
25

Now considering these are elements on the DOM (each of the numbers represent DIVs).

What is the best approach to keep them sorted based on the selected view? Should I maintain these buck开发者_如何转开发ets (JavaScript arrays) behind the scenes and each time a bucket is updated, render the view(s) again? Or should I do this using in-DOM sorting or in other words sorting the DOM elements themselves?

The main requirement is no flickering should be visible while performing change of views.

It is almost always faster from a performance perspective to do any type of sorting on a native JavaScript object (such as an array) rather than sorting DOM elements based on their contents.

If you're experiencing flickering, it may be due to CPU-intensive DOM manipulation. However, I cannot say for sure, as you have not provided an example.

Try jsbin.com

Also: To avoid encountering one of these pitfalls, I'd recommend using a library such as underscore.js or sugar.js