脚本执行期间浏览器回流

Question

我不清楚浏览器是否在脚本运行时或执行后启动回流。所以基本上，如果我有一个循环(100次迭代)，将一个元素插入DOM，浏览器停止脚本执行，用插入的元素重新计算布局，在每一步中重新绘制?然后下一步呢?或者不间断地插入100元素，然后再回流?

将其转换为代码，这两种代码之间是否存在性能差异?

for(let i = 0; i < 100; i++){
$('body').append('<div>SOmething....</div>')
}

还是更好?

let a = $('<div></div>');
for(let i = 0; i < 100; i++){
$(a).append('<div>SOmething....</div>')
}
$('body').append(a)

或者也许有一个更好的和更有效的解决方案插入大量的元素(10000或更多)到DOM不会减慢浏览器?

Answer 1

在现代浏览器中，回流只会在需要时发生，也就是说，要么在空闲时间(Safari)，就在下一次绘画之前(在Chrome和Firefox中，或者Safari中，如果之前没有空闲)，或者在调用少数强制回流的方法之一时(更多细节在我的回答中)。

对DOM的每一次修改都不会自己强制流，在你的代码中只有一次会发生，在下一次重新绘制之前。

然而，附加到DOM本身确实会带来一些成本，所以，是的，两种代码之间存在性能差异，但这种差异将是最小的。

附加到DocumentFragment可能更好，在某些情况下，构建一个巨大的标记字符串确实工作得更快，但是您真的应该重新考虑附加10000个元素的需要。
您是否考虑过分页系统或无限滚动系统?这样你每次只会添加一小部分，让浏览器喘口气，处理内存压力。至少，您可以考虑按批添加元素，并使用setTimeout让事件循环在每个批之间实际循环(以及浏览器呈现它所能呈现的内容)。