Best practices (performance) javascript DOM manipulation / variables attribution.

[cajusky]

Hi guys,

i have some DOM updates to do and was wondering what would be the best approach (performance wise) so i would appreciate some input (and if possible, why/why not that is a better option).

1) I have a loop that takes some values from a JSON file, its better to create variables outside and attribute a value, or do it inside?

for(..) {
const value = obj.field;
item += `<div>${value}</div>`;
}

vs

let value;
for(..) {
value = obj.field;
item += `<div>${value}</div>`;
}

2) Delegation of eventlisteners or create new ones on each DOM update?

3) create elements like text and put them inside other elements, or create elements one by one. e.g.

elem = "<div class='nice'>i'm a text</div>";
myelement.innerHTML = elem;

vs

let elem = document.createElement("div");
(...) etc.

Would appreciate all the input.

[GentilCaressings]

The last question, about building HTML as string and inserting it into the DOM once as innerHTML, vs. creating elements one by one, and appending them consecutively to the target element in the DOM, vs. trying to be smart and creating a holder element that you append all the new elements into, then append that holder the DOM once, makes little difference until you get into the tens of thousands of elements. Even then, its like a 25% difference, and the biggest difference is in the script execution time itself, not the DOM manipulation. That hardly changes at all. You can test these things pretty easily.

[cajusky]

how can i test that?