jQuery cambiar atributos múltiples o reemplazar todo html

Question

Me preguntaba si era más eficiente/más rápido para cambiar atributos múltiples con jQuery o para simplemente cambiar reemplazar todo el html de una vez. Este es el código que estoy usando en este momento.

// shows the table and changes the image to up 
showTable = function(tableId){ 
    $('#img' + tableId).attr("src", images["up"]).attr("alt", "Hide Table").attr("title", "Hide Table"); 
    $('#' + tableId).fadeIn(250); 
} 

¿o sería más rápido?

// shows the table and changes the image to up 
showTable = function(tableId){ 
    $('#img' + tableId).replaceWith('some html'); 
    $('#' + tableId).fadeIn(250); 
} 

Answer 1

$('#greatphoto').attr({ 
    alt: 'Beijing Brush Seller', 
    title: 'photo by Kelly Clark' 
}); 

ejemplo tomado de jQuery Documentation.

Answer 2

Dado que tarda un cuarto de segundo en desvanecerse en el resultado y este no es un ciclo cerrado, no notará ninguna diferencia de rendimiento entre los dos. Como señala yan.kun, puede hacer que el código sea un poco más conciso al usar la versión de conjuntos múltiples (mapa) de attr, pero con tres atributos que no están en un bucle cerrado, no va a hacer una diferencia de velocidad. (Si lo fuera, yo evitaría llamar attr por completo y utilizar las propias propiedades reflejadas del elemento   — src, alt y title se reflejan.)

Una vez dicho esto, hay otros razones para actualizar los elementos más que reemplazarlos. Por ejemplo, si tiene controladores asociados a los elementos, si actualiza los atributos de los elementos, los controladores permanecen adjuntos; si reemplaza los elementos, los controladores no están conectados (porque estaban conectados a los antiguos). La sustitución de elementos también provoca un reflujo, que puede ser significativo (o no) en función de su estructura DOM.