Javascript 通过js动态添加DOM元素，性能问题（DIV vs ListBox vs C）

我用64GB内存在我的I7上尝试以下代码。结果令我惊讶。将元素添加为DIV child 2秒和将选项添加到ListBox15秒之间有很大区别。为什么?

毕竟，对于DIV版本，我甚至指出了2秒。我注意到浏览器只在JS块的末尾更新视图。那么，为什么在类似的集合添加操作上运行循环需要更长的时间呢

出于比较的原因，我尝试填充WinFormDataGridView。如果您不使用DataTable填充它，需要很长时间，但是如果您使用DataTable，则不需要任何东西

那么在浏览器中有什么方法可以达到这个目标呢？还有为什么ListBox比ListBox慢

下面是代码示例

带JS的HTML：

函数addListItem { lst=document.getElementByIdlst；

---

forlet c=0；c所有情况下的问题都是相同的-重建控件的次数。 使用HTML时，每次在列表中添加新元素时都会重新呈现DOM。 通过减少这一点，可以显著提高dom性能

因此，如果您将JS函数更改为-

var selectList = document.getElementById('lst');

function addListItem() {
  var frag = document.createDocumentFragment(),
    elOption;
  for (var i=0; i<30000; ++i) {
    elOption = frag.appendChild(document.createElement('option'));
    elOption.text = "Dynamic item " + i;;
  }
  selectList.appendChild(frag);
}

该函数现在使用不同的API-

这将在内存中创建列表，并仅更新DOM一次

---

WinForm应用程序上也会发生同样的情况。当绑定控件一次时，它只需要构建一次控件。当一次添加一个元素时，控件必须更新那么多次。

我并不觉得在大多数情况下需要与操作系统交互的选择框比div慢，这与直觉完全不符ch没有。从用户体验的角度来看，30k项对于列表框来说太多了。将事物分类，让用户导航分类，这样他们就有了合理数量的选择，或者使用div和用户可以用来键入文本的输入，从而将选择的数量减少到只有那些匹配的。旁注，因为这不是p问题是，但这段代码在好几个地方都受到了我所谓的攻击。一定要声明你的变量。关于DataGridView的研究很好。你测量过吗？因为我有同样的想法，但它并没有改善任何东西，至少没有提高10%左右。@t.J.Crowder:刚刚尝试过——在Edge上2秒，在Chrome上12秒。~25秒使用你的功能在chrome/Edge上运行onds。这与不使用片段所需的时间差不多。@T.J.Crowder:不。对我来说，使用片段在chrome上快约2倍，在Edge上快约12倍。不确定为什么Edge能够在2秒钟内渲染它，而不是chrome。你自己试一试。我没有firefox来测试它。正如我上面所说：我确实试过我自己。使用Chrome on*nix，我的结果一点也不好。