javascript - 回流/渲染的时间如何工作？

Question

给定这段代码:

$('#foo').css('height', '100px'); // or any other change to the DOM
console.log('done!');

当第二条语句执行时，是否可以安全地假设回流已完成？

跟随问题:如果你用这个替换第二行，它会改变答案吗？

window.setTimeout('console.log("done");', 1);

我希望我的基本问题很清楚。非常感谢任何输入。

Answer 1

浏览器通常会将需要回流/重绘的 DOM 修改排队，以避免多次执行该昂贵的操作。然而，也有异常(exception)，正如您在本问答中所见:When does reflow happen in a DOM environment? .

考虑到您发布的代码，并假设控制台将同步记录输出^*，您第一个问题的答案是否。如果您只是更改元素的高度，浏览器通常会在执行回流/重绘操作之前完成所有其他同步代码的运行。但是，正如上面链接中的答案所说，某些操作确实会触发立即回流，因此无法回答您问题的“或对 DOM 的任何其他更改”部分。

考虑到上述相同的假设，第二个问题的答案是肯定的。字符串“done”将在浏览器事件循环的下一个滴答中记录到控制台，因此可以安全地假设这是在回流之后。

通常您不必担心这种浏览器行为，除非您正在优化代码以提高性能并尝试避免回流。

^{* 有时控制台输出比预期晚；不幸的是，我找不到一个好的链接。}