Vitesse/efficacité des DOM appendChild multiples

Question

Je dois créer sept éléments div en un seul coup - le conteneur A qui contient A1, A2, A3 et A4, puis A2a et A2b dans A2. J'utilise plusieurs appels à cette petite fonction :

function u1(t,i,c,p){ // type,id,class_name,parent_id
    var tag=document.createElement(t); // Create node to be appended
    tag.id=i;
    tag.className=c;
    document.getElementById(p).appendChild(tag);
}

Ma question : Existe-t-il un moyen plus efficace de regrouper les sept éléments, puis de n'effectuer qu'un seul DOM append ? Ou est-ce que innerHTML est une bonne option ?

Merci :)

Answer 1

Vous pourriez simplement utiliser .innerHTML . Une alternative serait d'utiliser un fragment de document :

var fragment = document.createDocumentFragment();

function u1(t, i, c){ // type,id,class_name
    var tag = document.createElement(t); // Create node to be appended
    tag.id = i;
    tag.className = c;
    fragment.appendChild(tag); // will use `fragment` from the outer scope
}

// call u1() seven times

// then insert all the elements into the DOM all at once
document.getElementById('foo').appendChild(fragment);

Les fragments de documents sont un peu lents à créer, mais ils permettent de gagner en performance à long terme. Dans ce cas, par exemple, vous passez de 7 insertions DOM à une seule. (Tout ce qui implique le DOM est lent en JavaScript).

Si vous souhaitez évaluer votre cas d'utilisation spécifique en utilisant les deux approches, créer un scénario de test jsPerf .