JavaScript:按排序顺序插入DOM元素的最快方法

所以我有几个(~30)异步调用返回数据(每次调用约25条记录),我想按特定顺序显示.

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

我想用每个数据集插入数据(因为它回来了)......但这意味着我需要一种不同的方式来处理排序/排序.

我考虑过的方法:

理想情况下,在某种B-Tree中镜像DOM,以便INSERT操作只是遍历树寻找正确的元素insertBefore/insertAfter ...因为我还没有看到任何库来解决这个需求,看起来像我最终会写一些代码.

手动迭代DOM寻找要插入的元素......相对来说,看起来似乎很乏味.

只需在加载每个数据集后使用jQuery.sort(fn)...最好看起来很hacky(考虑到它运行的次数和DOM操作的数量),但到目前为止最容易实现代码,因为它像5行.

我考虑了异步返回和DOM操作之间的某种缓冲队列,但是我不太了解JS和线程以使用这种方法感觉很舒服.

我喜欢直接插入排序槽的想法,但我知道DOM操作可能"慢"(取决于它是如何完成的等等 - 我绝不是一个JS大师 - 因此在这里问).具有单独的读取器/ DOM处理的缓冲区队列的想法似乎可以在响应性和DOM操作难度之间提供合理的折衷,但是这一点对我来说都是理论上的......所有的说法和完成,如果它结束比起它的价值更麻烦,我要么原样离开,要么只是去jQ.sort DOM的懒惰路线.

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

谢谢

我选择了Option 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);