Question

所以我有几个（~30个）异步调用返回数据（每次调用约25条记录），我想按特定顺序显示。

目前，页面等待加载所有内容，对单个内部数组进行排序，然后添加DOM元素（每个数据项都应用于HTML模板/字符串，该模板/字符串有效连接并添加一次到父元素＆＃39 ; s innerHTML）。

我喜欢与每个数据集一起插入的数据（当它返回时）......但这意味着我需要一种不同的方式来处理排序/排序。

我考虑过的方法：

理想情况下，在某种B-Tree中镜像DOM，以便INSERT操作只是遍历树寻找正确的元素insertBefore / insertAfter ...因为我还没有看到任何库为了满足这种需求，似乎我最终写了一些代码。
手动迭代DOM，寻找要插入的元素......相对而言，......看起来很乏味。
在加载每个数据集之后只使用jQuery.sort（fn）...充其量只是hacky（考虑到它运行的次数以及DOM操作的数量），但到目前为止最容易实现代码，因为它类似于5行。
我考虑过异步返回和DOM操作之间的某种缓冲队列，但是我不太了解JS和线程以对这种方法感到满意。

我喜欢直接插入已排序的插槽的想法，但我知道DOM操作可以“慢速”＃34; （取决于它是如何做的等等 - 我绝不是一个JS大师 - 因此在这里问）。具有单独的读取器/ DOM处理的缓冲区队列的想法似乎可以在响应性和DOM操作难度之间提供合理的折衷，但是在这一点上这对我来说都是理论上的......并且所有这些都说完了如果它最终比它的价值更麻烦，我会留下原样，或者只是去jQ.sort DOM的懒惰路线。

您的知识渊博的建议将不胜感激：）

由于

Answer 1

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

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

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

1 个答案: