Run results for: append(DocumentFragment) vs. append(list of nodes)

Run details:

User agent: Mozilla/5.0 (Android 12; Mobile; rv:139.0) Gecko/139.0 Firefox/139.0

Browser: Firefox Mobile 139

Operating system: Android

Device Platform: Mobile

Date tested: one year ago

append(DocumentFragment)

135K/s

append.call(___, array)

1K/s

append(...array)

92/s

View exact numbers

Test name	Executions per second
✓ append(DocumentFragment)	135,036 Ops/sec
append.call(___, array)	1,058 Ops/sec
append(...array)	92 Ops/sec

HTML Preparation code:

<ul id="list"></ul>

Script Preparation code:

list.replaceChildren()

var oneThousandItems = []
var fragment = document.createDocumentFragment()

for (let i = 1; i <= 1000; i++) {
    const li = document.createElement("li")
    li.textContent = i
    oneThousandItems.push(li)
    fragment.append(li.cloneNode(true))
}

Tests:

append(...array)
list.replaceChildren() list.append(...oneThousandItems)
append.call(___, array)
list.replaceChildren() list.append.call(list, oneThousandItems)
append(DocumentFragment)
list.replaceChildren() list.append(fragment)