JavaScript : Fastest way to insert DOM element in sort order

因此，我有几个(〜30)异步调用返回了数据(每个调用〜25个记录)，这些数据要按特定顺序显示。

当前，页面等待所有内容加载，对单个内部数组进行排序，然后添加DOM元素(每一项数据都被应用到HTML模板/字符串中，该模板有效地被串联并一次添加到父元素的innerHTML中)。

我希望每个数据集都插入要插入的数据(随着数据的返回)……但这意味着我需要一种不同的方式来处理排序/排序。

我考虑过的方法:

理想情况下，将DOM镜像到某种B树中，以便INSERT操作仅遍历树以寻找正确的元素来insertBefore/insertAfter ...因为我还没有看到任何可满足此需求的库就像我最终写了一些代码一样。

手动迭代DOM以寻找要插入的元素...相对而言，这似乎很缓慢。

加载每个数据集后，

只需使用jQuery.sort(fn)...似乎充其量不过是hacky(考虑到要运行的次数和DOM操作的数量)，但到目前为止，最容易实现代码方式，因为它就像5行。

我考虑了异步返回和DOM操作之间的某种缓冲队列，但是我对JS和线程一无所知，以至于对这种方法不满意。

我喜欢直接插入到已排序的插槽中的想法，但是我知道DOM操作可能是“缓慢的”(取决于它的完成方式，等等-我绝不是JS专家-因此在这里询问)。带有单独的读取器/DOM处理的缓冲区队列的想法似乎可以在响应性和DOM操作痛苦之间提供合理的折衷，但这对我来说在这点上都是理论上的……而且一切都说完了，如果结束了麻烦多于其值(value)，我要么保持现状，要么就走jQ.sort DOM的懒惰路线。

您的知识渊博的建议将不胜感激:)

谢谢

最佳答案

我将使用选项2。DOM只是树结构中的对象，因此除了您想要的树之外，不需要单独的抽象树。您可以通过属性或expando属性直接将数据与元素相关联(如果进行后者，请注意命名冲突，选择与项目非常相关的内容)-后者具有速度优势，而不仅限于字符串。

搜索DOM元素列表根本不会很慢，也不是很麻烦。

在容器div的div中插入随机数的示例:

var container= document.getElementById("container");

function insertOne() {
  // Our random number
  var num = Math.floor(Math.random() * 1000);

  // Convenient access to child elements
  var children = Array.prototype.slice.call(container.children);

  // Find the one we should insert in front of
  var before = children.find(function(element) {
    return element.__x__random > num;
  });

  // Create the div
  var div = document.createElement('div');
  div.innerHTML = num;
  div.__x__random = num;

  // Insert (if `before` is null, it becomes an append)
  container.insertBefore(div, before);
}

// Do it every 250ms
var timer = setInterval(insertOne, 250);

// Stop after 5 seconds
setTimeout(function() {
  clearInterval(timer);
}, 5000);

<div id="container"></div>

关于JavaScript : Fastest way to insert DOM element in sort order，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41722953/