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

Question

鉴于此代码：

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

当第二个语句执行时，假设回流完成是否安全？

关注问题：如果用这个替换了第二行，是否会改变答案？

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

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

Answer 1

浏览器通常会对需要重排/重绘的DOM修改进行排队，以避免多次执行昂贵的操作。但是，正如您在本问答中所看到的那样，有例外：When does reflow happen in a DOM environment?。

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

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

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

^{*有时控制台输出的时间比预期的要晚;遗憾的是，我无法找到关于此的良好链接。}

Answer 2

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

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