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

Question

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

javascriptjquerysorting

8

我有几个（约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的懒惰路线。

非常感谢您的专业建议 :)

- Scott Brickey

3

你觉得迭代 DOM 元素（毕竟它们只是树形结构中的对象）会变得“非常缓慢”，这是什么让你这样想的？ - T.J. Crowder

1

你正在处理太低层次的东西 - 你需要一个现代化的库，比如React（它值得投入努力）。 - Rob Hoff

DOM并不慢。http://jsfiddle.net/YNxEK/ - 大约100ms内处理了10k个div。 - thedayturns

1

@area5one 不，我不会为了一个语义问题而更改整个平台。 - Scott Brickey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

我会选择选项2。DOM只是树状结构中的对象，因此除非您需要，否则不需要单独的抽象树。您可以通过属性或扩展属性直接将数据与元素关联（如果使用后者，请注意命名冲突，选择与项目相关的非常具体的名称）——后者具有速度优势并且不限于字符串。

在DOM元素列表中搜索并不明显缓慢，也不需要太多工作。

例如，在容器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>