Run results for: tempalte literal vs query selector/set attribute

Run details:

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

Browser: Chrome 91

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
template literal	83621.2 Ops/sec
query selector	94936.9 Ops/sec

HTML Preparation code:

<!DOCTYPE html>

<html lang="en">

<body></body>

</html>

Script Preparation code:

var e = {};
e.item = document.body;
e.data = {
    isRequired: true,
    header: 'something'
}

Tests:

template literal
e.item.innerHTML = `<div class="wj-listbox-item__inner">`+ `<input class="wj-listbox-item__input" type="checkbox">` + `<span class="wj-listbox-item__label">${e.data.header}</span>`+ `</div>`; if(e.data.isRequired) { const checkbox = e.item.querySelector('input[type="checkbox"'); if(checkbox){ checkbox.setAttribute("disabled", true); } }
query selector
e.item.innerHTML = `<div class="wj-listbox-item__inner">`+ `<input class="wj-listbox-item__input" type="checkbox" ${e.data.isRequired ? 'disabled' : '' }>` + `<span class="wj-listbox-item__label">${e.data.header}</span>`+ `</div>`;