脚本执行期间浏览器回流

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)

或者，有没有更好、更有效的解决方案，可以在DOM中插入大量元素（10000个或更多），而不会使浏览器的速度降低那么多？

Answer 1

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

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

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

附加到DocumentFragment可能更好，在某些情况下，构建一个巨大的标记字符串的速度确实更快，但您确实应该重新考虑是否需要附加10000个元素
相反，您考虑过分页系统还是无限滚动系统？通过这种方式，每次只附加一小部分，让浏览器呼吸并处理内存压力。至少，您可以考虑批处理添加html" target="_blank">元素，并且让事件循环实际上循环（并且浏览器在每个批次之间使用<代码> SETTimeOuts）。