回流/渲染的时间是如何工作的?

How does the timing of reflow / rendering work?

本文关键字：工作 何工作 时间 回流      更新时间：2023-09-26

给定以下代码:

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

当第二个语句执行时，是否可以安全地假设流已经完成?

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

window.setTimeout('console.log("done");', 1);
我希望我的潜在问题是清楚的。

浏览器通常对需要回流/重绘的DOM修改进行排队，以避免多次执行昂贵的操作。然而，也有例外，正如您在这个问题中看到的:什么时候在DOM环境中发生流?

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

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

通常你不必担心这种浏览器行为，除非你正在优化代码的性能，并试图避免回流。

*有时控制台输出比预期的要晚;

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

$('#foo').css('height', '100px');
console.log($('#foo').css('height')); // will log '100px'
相关文章：