Benchmark: append(DocumentFragment) vs. append(list of nodes)

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)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append(...array)
append.call(___, array)
append(DocumentFragment)

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome Mobile 103 on Android

View result in a separate tab

Test name	Executions per second
append(...array)	97.3 Ops/sec
append.call(___, array)	397.9 Ops/sec
append(DocumentFragment)	38106.9 Ops/sec

append(DocumentFragment) vs. append(list of nodes) (version: 0)

Comparing performance of: append(...array) vs append.call(___, array) vs append(DocumentFragment)

Created: one year ago by: Guest

Jump to the latest result

append(...array)

append.call(___, array)

append(DocumentFragment)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A