JQuery изменяет несколько атрибутов или заменяет весь html

Мне было интересно, было ли более эффективно/быстрее изменять несколько атрибутов с помощью jQuery или просто менять, заменив все html за один раз. Это код, который я использую в данный момент.

// 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);
}

или это будет быстрее?

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

Ответы

Ответ 1

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

Пример, взятый из jQuery Documentation.

Ответ 2

Учитывая, что вы берете четверть секунды, чтобы исчезнуть в результате, и это не сложный цикл, вы не заметите разницы в производительности между ними. Как указывает yan.kun, вы можете сделать код немного более кратким, используя многострочную (картографическую) версию attr, но с тремя атрибутами не в плотной петле, это не будет делать разницу в скорости. (Если бы это было так, я бы полностью не позвонил attr и использовал элемент собственных отраженных свойств — src, alt, и title отражены.)

Сказав это, есть другие причины обновлять элементы, а не заменять их. Например, если у вас есть обработчики, прикрепленные к элементам, если вы обновляете атрибуты элементов, обработчики остаются прикрепленными; если вы замените элементы, обработчики не будут прикреплены (потому что они были прикреплены к старым). Замена элементов также вызывает оплату, что может быть значительным (или нет) в зависимости от вашей структуры DOM.