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 修改排队，以避免多次执行该昂贵的操作。但是，也有例外，正如您在此问答中看到的那样：回流在 DOM 环境中何时发生？.

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

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

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

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

Answer 2

该.css()方法不是异步的，因此您可以放心地假设它之后的任何语句都将按照您的预期执行。

$('#foo').css('height', '100px');
console.log($('#foo').css('height')); // will log '100px'