使用 JavaScript 对网页上的存储桶中的 DOM 元素进行排序的最佳方法
我面临一个问题，我需要根据不同的视图对元素进行排序，维护一堆不同视图的存储桶。
例如，视图 1 看起来像这样：
Bucket A:
1
4
Bucket B:
23
25
Bucket C:
9
14
视图 2 可能看起来像：
Bucket A:
1
4
9
14
23
25
现在考虑这些是 DOM 上的元素（每个数字代表 DIV）。
根据所选视图对它们进行排序的最佳方法是什么？我是否应该在幕后维护这些存储桶（JavaScript 数组），并且每次更新存储桶时，再次渲染视图？或者我应该使用 DOM 内排序或者换句话说对 DOM 元素本身进行排序来做到这一点？
主要要求是在执行视图更改时不应出现可见的闪烁。
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 buckets (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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
从性能角度来看，对本机 JavaScript 对象（例如数组）进行任何类型的排序几乎总是比根据内容对 DOM 元素进行排序要快。
如果您遇到闪烁，可能是由于 CPU 密集型 DOM 操作造成的。但是，我不能肯定地说，因为你没有提供例子。
尝试 jsbin.com
另外：避免遇到 这些陷阱，我建议使用 underscore.js 或 Sugar.js 等库
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