Run results for: litterals vs createElement

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36

Browser: Chrome 89

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
let doc	2807.8 Ops/sec
const doc	1227.0 Ops/sec
template let	932.0 Ops/sec
template	738.9 Ops/sec

HTML Preparation code:

<div id="content"></div>

Script Preparation code:

let div = document.createElement("div");
div.setAttribute("id", "content");
document.getElementsByTagName("body")[0].appendChild(div);

Tests:

let doc
let div = document.createElement("div"), span = document.createElement("span"); div.setAttribute("attr1", "value1"); div.setAttribute("attr2", "value2"); div.setAttribute("attr3", "value3"); div.setAttribute("attr4", "value4"); div.setAttribute("attr5", "value5"); span.setAttribute("attr1", "value1"); span.setAttribute("attr2", "value2"); span.setAttribute("attr3", "value3"); span.setAttribute("attr4", "value4"); span.setAttribute("attr5", "value5"); div.appendChild(span) span = null; document.getElementsByTagName("body")[0].appendChild(div); div = null;
const doc
const div = document.createElement("div"), span = document.createElement("span"); div.setAttribute("attr1", "value1"); div.setAttribute("attr2", "value2"); div.setAttribute("attr3", "value3"); div.setAttribute("attr4", "value4"); div.setAttribute("attr5", "value5"); span.setAttribute("attr1", "value1"); span.setAttribute("attr2", "value2"); span.setAttribute("attr3", "value3"); span.setAttribute("attr4", "value4"); span.setAttribute("attr5", "value5"); div.appendChild(span) document.getElementsByTagName("body")[0].appendChild(div);
template let
let html = ` <div attr1="value1" attr2="value2" attr3="value3" attr4="value4" attr5="value5"> <span attr1="value1" attr2="value2" attr3="value3" attr4="value4" attr5="value5"></span> </div> `; document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend", html);
template
document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", ` <div attr1="value1" attr2="value2" attr3="value3" attr4="value4" attr5="value5"> <span attr1="value1" attr2="value2" attr3="value3" attr4="value4" attr5="value5"></span> </div> `);

Run results for: litterals vs createElement

let doc

const doc

template let

template