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

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 103

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

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