Profonde clonage vs réglage de innerHTML: quel est le plus rapide?

Testons!

J'ai ajouté le code suivant à une copie de StackOverflow Questions de la page (la suppression de scripts d'abord, et en cours d'exécution à partir de zéro avec l'un des timeit()s décommenté chaque fois, trois séries de 100 ops:

function timeit(f) {
    var start= new Date();
    for (var i=100; i-->0;) {
        f();
    }
    return new Date()-start;
}

var c= document.getElementById('content');
var clones= [];

//alert('cloneNode: '+timeit(function() {
//   clones.push(c.cloneNode(true));
//}))

//alert('innerHTML: '+timeit(function() {
//   var d= document.createElement('div');
//   d.innerHTML= c.innerHTML;
//   clones.push(d);
//}))

Voici les résultats en cours d'exécution sur une VirtualBox sur un Core 2 Q9300:

IE7
cloneNode: 3238, 3235, 3187
innerHTML: 8442, 8468, 8552

Firefox3
cloneNode: 1294, 1315, 1289
innerHTML: 3593, 3636, 3580

Safari3
cloneNode: 207, 273, 237
innerHTML: 805, 818, 786

Chrome1
cloneNode: 329, 377, 426
innerHTML: 2327, 2536, 2865

Opera10
cloneNode: 801, 791, 771
innerHTML: 1852, 1732, 1672

Donc cloneNode(true) est beaucoup plus rapide que la copie innerHTML. Bien sûr, il a toujours été va être; serialising un DOM de texte, puis ré-analyse de HTML est de travailler dur. La raison DOM opérations enfants sont généralement lent, c'est que vous êtes de l'insertion ou de les déplacer un par un; tous-at-once DOM opérations comme cloneNode ne pas avoir à le faire.

Safari parvient à faire le innerHTML op étonnamment rapidement, mais toujours pas presque aussi rapidement qu'il ne cloneNode. C'est à dire est, comme prévu, un chien.

Donc, l'auto-1s tout rond pour tout le monde qui a dit innerHTML serait Évidemment plus Vite sans tenir compte de ce que la question était en fait en train de faire.

Et oui, jQuery utilise innerHTML à cloner. Pas parce que c'est plus rapide si — lire la source:

//IE copies events bound via attachEvent when
//using cloneNode. Calling detachEvent on the
//clone will also remove the events from the orignal
//In order to get around this, we use innerHTML.

jQuery utilise l'Élément.attachEvent() pour mettre en place son propre système d'événement, alors, naturellement, c'est pour éviter ce bug. Si vous n'en avez pas besoin, vous pouvez éviter la surcharge.

[Hors-sujet à part: encore une fois, je pense que la tenue de jQuery comme le summum de bonnes Pratiques peut être un peu erronée, compte tenu notamment de la ligne suivante:

html.replace(/jQuery\d+="(?:\d+|null)"/g, "")

Que le droit de jQuery ajoute son propre arbitraire des attributs aux éléments HTML, et puis il faut se débarrasser d'eux quand il les clones (ou sinon donne accès à leur balisage, par exemple, $().html() la méthode). C'est assez laid, mais il pense que la meilleure façon de le faire est le traitement de HTML à l'aide de l'expression régulière, qui est le genre d'erreur de base que vous attendez plus de naïf 1-réputation AFIN de questionneurs que l'auteur de la Seconde Venue du Meilleur JS Cadre Evar.

Espère que vous n'avez pas la chaîne “jQuery1="2"” n'importe où dans votre contenu texte, 'cos si donc vous avez juste a mystérieusement perdu. Grâce jQuery! Ainsi se termine le hors-sujet de côté.]