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