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: 10 months ago

Test name	Executions per second
append(...array)	92.5 Ops/sec
append.call(___, array)	1057.9 Ops/sec
append(DocumentFragment)	135036.5 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)

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

append(...array)

append.call(___, array)

append(DocumentFragment)