Run results for: Compare appendChild after createElement, vs appendChild after getElementById

Run details:

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

Browser: Firefox 91

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 3 years ago

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

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)

Run results for: Compare appendChild after createElement, vs appendChild after getElementById

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)