Jquery: en mémoire

Question

construction préalable

similaires à cette question: JQuery: Build HTML in 'memory' rather than DOM

J'ai un

var $container = $("#container"); 

J'ai aussi:

jQuery.fn.somedomedits = function(expr) { 
    return this.each(function() { 
     var $self = $(this); 
     $self.find(".adsf").append("<div></div>"); 
     // A lot more complex dom insertions like this 
    }); 
}; 

En ce moment je fais:

$container.somedomedits().somemoredomedits(); 
// The somemoredomedits method is a similar plugin to the first one. 

Juste le faire de cette façon change DOM directement.

donc je fait:

var $editeddom = $container.somedomedits().somemoredomedits(); 
$containerwrapper.html($editeddom); 

Est-ce que la bonne façon de le faire?

Je ne vois aucune amélioration de la vitesse dans Firebug/Fox, pas sûr si cela serait bénéfique pour les autres navigateurs.

Merci

Answer 1

Ce code est plus lent

var $editeddom = $container.somedomedits().somemoredomedits(); 
$containerwrapper.html($editeddom); 

parce qu'il fait la même chose que le

$container.somedomedits().somemoredomedits(); 

, plus affecter variable et exécuter une méthode supplémentaire (html()). Cela serait plus rapide si vous créiez des éléments à la volée et que vous les insériez dans l'arbre DOM une fois que toute la structure serait prête, mais si vous obtenez des éléments de DOM avec le sélecteur jQuery, vous obtenez un objet qui reste "souligne" DOM. Affecter cela à la variable ne le fait pas cloner automatiquement.

Vous pouvez cloner cet objet et ensuite exécuter une modification sur le clone et après avoir terminé remplacer le contenu, mais vous devez d'abord vérifier si le clonage serait plus rapide que ce que vous perdez en travaillant directement sur DOM.

// clone part of DOM 
// .clone(true) clones event handlers as well if you don't need it 
// you can just run .clone() 
var items = $(selector).clone(true); 

// perform your complex operations 
items.somedomedits().somemoredomedits(); 

// replace part of DOM with modified clones 
$(selector).replaceWith(items);