我知道进行多个 dom 操作是不好的,因为它会强制进行多次重绘。
即:
$('body').append('<div />')
.append('<div />')
.append('<div />')
.append('<div />');
相反,更好的做法显然是:
$('body').append('<div><div></div><div></div><div></div><div></div></div>');
但我对虚拟操作很好奇
即:
$('<div />').append('<div />')
.append('<div />')
.append('<div />')
.append('<div />')
.appendTo('body');
它仍然很糟糕吗,显然多次调用一个函数会有一些开销,但是会不会有任何严重的性能影响?
我问的原因是:
var divs = [
{text: 'First', id: 'div_1', style: 'background-color: #f00;'},
{text: 'Second', id: 'div_2', style: 'background-color: #0f0;'},
{text: 'Third', id: 'div_3', style: 'background-color: #00f;'},
{text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'},
{text: 'Fifth', id: 'div_5', style: 'background-color: #0f0;'},
{text: 'Sixth', id: 'div_6', style: 'background-color: #00f;'}
];
var element = $('<div />');
$.each(divs, function(i,o){
element.append($('<div />', o));
});
$('body').append(element);
假设 div 数组来自描述表单的数据库表(好的,我在示例中使用的是 div,但它可以很容易地用输入替换)或类似的东西。
或者使用我们的“推荐”版本:
var divs = [
{text: 'First', id: 'div_1', style: 'background-color: #f00;'},
{text: 'Second', id: 'div_2', style: 'background-color: #0f0;'},
{text: 'Third', id: 'div_3', style: 'background-color: #00f;'},
{text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'},
{text: 'Fifth', id: 'div_5', style: 'background-color: #0f0;'},
{text: 'Sixth', id: 'div_6', style: 'background-color: #00f;'}
];
var element = '<div>';
$.each(divs, function(i,o){
element += '<div ';
$.each(o, function(k,v){
if(k != 'text'){
element += k+'="'+v+'" ';
}
});
element += '>'+o.text+'</div>';
});
element += '</div>';
$('body').append(element);
最佳答案
首先,虽然阅读像这样的潜在性能影响很好,但您应该始终从测量开始,看看您是否有问题。
如果您看不到问题,请编写最易读的代码。
如果你能察觉到问题,衡量、改变和衡量。
综上所述,您发布的最后一个示例涉及尚未写入 DOM 的元素,因此在 appendTo
将元素添加到 DOM 之前不会重绘。
如果您能捕捉到第二个和第三个示例之间的速度差异,我会感到非常惊讶 - 如果您能看到它们之间的任何重大差异,我会感到非常惊讶。
关于javascript - "virtual"dom 操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13204469/