I was wondering if it were more efficient/faster to change multiple attributes with jQuery or to just change replace all the html in one go. This is the code i am using at the moment.
我想知道用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);
}
or would this be faster?
或者这会更快？
// shows the table and changes the image to up
showTable = function(tableId){
$('#img' + tableId).replaceWith('some html');
$('#' + tableId).fadeIn(250);
}
2 个解决方案
#1
42
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});
Example taken from jQuery Documentation.
从jQuery文档中获取的示例。
#2
5
Given that you're taking a quarter of a second to fade in the result and this isn't a tight loop, you're not going to notice any performance difference between the two. As yan.kun points out, you can make the code a bit more concise by using the multi-set (map) version of attr, but with three attributes not in a tight loop, it's not going to make a speed difference. (If it were, I'd avoid calling attr entirely and use the element's own reflected properties — src, alt, and title are all reflected.)
鉴于你需要花费四分之一秒来淡化结果并且这不是一个紧凑的循环，你不会注意到两者之间的任何性能差异。正如yan.kun所指出的那样，你可以通过使用attr的多集（map）版本使代码更简洁，但是有三个属性不在紧密循环中，它不会产生速度差异。 （如果是的话，我会避免完全调用attr并使用元素自己的反射属性 - src，alt和title都会被反映出来。）
Having said that, there are other reasons to update elements rather than replace them. For instance, if you have any handlers attached to the elements, if you update the elements' attributes, the handlers remain attached; if you replace the elements, the handlers aren't attached (because they were attached to the old ones). Replacing elements also causes reflow, which can be significant (or not) depending on your DOM structure.
话虽如此，还有其他原因需要更新元素而不是替换元素。例如，如果您有任何处理程序附加到元素，如果您更新元素的属性，处理程序保持连接;如果更换元素，则不附加处理程序（因为它们附加到旧的处理程序）。更换元素也会导致重排，这可能很重要（或不重要），具体取决于您的DOM结构。
#1
42
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});
Example taken from jQuery Documentation.
从jQuery文档中获取的示例。
#2
5
Given that you're taking a quarter of a second to fade in the result and this isn't a tight loop, you're not going to notice any performance difference between the two. As yan.kun points out, you can make the code a bit more concise by using the multi-set (map) version of attr, but with three attributes not in a tight loop, it's not going to make a speed difference. (If it were, I'd avoid calling attr entirely and use the element's own reflected properties — src, alt, and title are all reflected.)
鉴于你需要花费四分之一秒来淡化结果并且这不是一个紧凑的循环，你不会注意到两者之间的任何性能差异。正如yan.kun所指出的那样，你可以通过使用attr的多集（map）版本使代码更简洁，但是有三个属性不在紧密循环中，它不会产生速度差异。 （如果是的话，我会避免完全调用attr并使用元素自己的反射属性 - src，alt和title都会被反映出来。）
Having said that, there are other reasons to update elements rather than replace them. For instance, if you have any handlers attached to the elements, if you update the elements' attributes, the handlers remain attached; if you replace the elements, the handlers aren't attached (because they were attached to the old ones). Replacing elements also causes reflow, which can be significant (or not) depending on your DOM structure.
话虽如此，还有其他原因需要更新元素而不是替换元素。例如，如果您有任何处理程序附加到元素，如果您更新元素的属性，处理程序保持连接;如果更换元素，则不附加处理程序（因为它们附加到旧的处理程序）。更换元素也会导致重排，这可能很重要（或不重要），具体取决于您的DOM结构。