このコードを考えると：
$('#foo').css('height', '100px'); // or any other change to the DOM
console.log('done!');
2 番目のステートメントが実行されると、リフローが完了したと想定しても安全ですか?
質問の続き: 2 行目をこれに置き換えた場合、答えは変わりますか?
window.setTimeout('console.log("done");', 1);
私の根底にある質問が明確であることを願っています。ご意見ありがとうございます。
ブラウザーは通常、リフロー/再描画を必要とする DOM の変更をキューに入れ、その高価な操作を複数回実行することを回避します。ただし、この Q&A でわかるように、これには例外があります: DOM 環境でリフローが発生するのはいつですか? .
投稿したコードを考慮し、コンソールが出力を同期的にログに記録すると仮定すると、最初の質問に対する答えはnoです。要素の高さを変更するだけの場合、ブラウザーは通常、リフロー/再描画操作を実行する前に、他のすべての同期コードの実行を終了します。ただし、上記のリンクの回答にあるように、一部のアクションはすぐにリフローをトリガーするため、質問の「またはその他の DOM への変更」の部分に回答することはできません。
上記と同じ仮定を考慮すると、2 番目の質問に対する答えは「はい」です。文字列 "done" は、ブラウザーのイベント ループの次のティックでコンソールに記録されるため、リフロー後と想定しても安全です。
通常、パフォーマンスのためにコードを最適化し、リフローを回避しようとしている場合を除き、この種のブラウザーの動作について心配する必要はありません。
* コンソールの出力が予想より遅れることがあります。残念ながら、それに関する適切なリンクが見つかりませんでした。
メソッドは非同期ではないため、その後.css()のステートメントは期待どおりに実行されると想定できます。
$('#foo').css('height', '100px');
console.log($('#foo').css('height')); // will log '100px'