Benchmark: Compare appendChild after createElement, vs appendChild after getElementById

Compare appendChild after createElement, vs appendChild after getElementById (version: 3)

Comparing performance of: appendChild after createElement vs appendChild after getElementById vs appendChild after createElement (with cloneNode) vs appendChild after getElementById (with cloneNode) vs appendChild to fragment, then append after createElement vs appendChild to fragment, then append after getElementById vs appendChild to fragment, then append after createElement (with cloneNode) vs appendChild to fragment, then append after getElementById (with cloneNode)

Created: 2 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<section id="container"></section>

Tests:

appendChild after createElement
let container = document.createElement("section"); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { container.appendChild(elem); elem = document.createElement("div"); }
appendChild after getElementById
let container = document.getElementById("container"); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { container.appendChild(elem); elem = document.createElement("div"); }
appendChild after createElement (with cloneNode)
let container = document.createElement("section"); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { container.appendChild(elem); elem = elem.cloneNode(); }
appendChild after getElementById (with cloneNode)
let container = document.getElementById("container"); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { container.appendChild(elem); elem = elem.cloneNode(); }
appendChild to fragment, then append after createElement
let fragment = document.createDocumentFragment(""); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { fragment.appendChild(elem); elem = document.createElement("div"); } let container = document.createElement("section"); container.appendChild(elem)
appendChild to fragment, then append after getElementById
let fragment = document.createDocumentFragment(""); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { fragment.appendChild(elem); elem = document.createElement("div"); } let container = document.getElementById("container"); container.appendChild(elem)
appendChild to fragment, then append after createElement (with cloneNode)
let fragment = document.createDocumentFragment(""); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { fragment.appendChild(elem); elem = document.cloneNode(); } let container = document.createElement("section"); container.appendChild(elem)
appendChild to fragment, then append after getElementById (with cloneNode)
let fragment = document.createDocumentFragment(""); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { fragment.appendChild(elem); elem = document.cloneNode(); } let container = document.getElementById("container"); container.appendChild(elem)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendChild after createElement
appendChild after getElementById
appendChild after createElement (with cloneNode)
appendChild after getElementById (with cloneNode)
appendChild to fragment, then append after createElement
appendChild to fragment, then append after getElementById
appendChild to fragment, then append after createElement (with cloneNode)
appendChild to fragment, then append after getElementById (with cloneNode)

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: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:91.0) Gecko/20100101 Firefox/91.0

Browser/OS: Firefox 91 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
appendChild after createElement	1174.9 Ops/sec
appendChild after getElementById	912.6 Ops/sec
appendChild after createElement (with cloneNode)	1791.3 Ops/sec
appendChild after getElementById (with cloneNode)	1996.0 Ops/sec

Compare appendChild after createElement, vs appendChild after getElementById (version: 3)

Created: 2 years ago by: Registered User

Jump to the latest result

appendChild after createElement

appendChild after getElementById

appendChild after createElement (with cloneNode)

appendChild after getElementById (with cloneNode)

appendChild to fragment, then append after createElement

appendChild to fragment, then append after getElementById

appendChild to fragment, then append after createElement (with cloneNode)

appendChild to fragment, then append after getElementById (with cloneNode)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A