为什么在将多个元素附加到DOM时,使用文档片段并不能提高性能

首先,这和这个问题不一样,尽管你可能认为这是第一眼看到的: Does using a document fragment really improve performance?

看:这个js小提琴 https://jsperf.com/fragment-no-clone

之后 一切都安排好了。(与创建元素相反,追加到DOM,创建下一个元素,一个接一个地追加到DOM)

这里有一些代码只是为了说明我的意思:

使用片段

let fragment = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
  let element = document.createElement('div');
  fragment.appendChild(element);
}

document.body.appendChild(fragment);

不使用片段

for (var i = 0; i < 100; i++) {
  let element = document.createElement('div');
  document.body.appendChild(element);
}

立即 然后浏览器必须进行更多的绘制和计算,而如果我将它很好地设置为一个片段,然后一次追加所有内容,浏览器只需绘制/计算 一旦

在现实中,我并没有看到这样的表现。在那把小提琴上测试Chrome/Safari的差异可以忽略不计,虽然在Firefox中有一个支持使用片段的小提升,但并不是很大。

那引擎盖下面发生了什么?我的理解完全有缺陷吗?