質問: 0; i < 500; i ++){ console.log(i) } }) }) ``` ``` .hide { display: none; } ``` ``` テスト ```
回答: 観測されているとおり、要素のclassを変更しても、ブラウザは即座に描画するわけではありません。イベントループに入った後か、必要なときに描画まで行われます。 もし、示されているコードの`for`ループで重い処理をしたいのなら、そもそもメインスレッドで重い処理をすべきではありません。Workerで処理すべきです。 アニメーション処理をしたい場合は、`requestAnimationFrame()` を用います。 どうしても同期的に描画をさせたいなら、レイアウト結果が必要となるようなAPIを呼んで強制描画させることができます。たとえば `elem.offsetWidth` を呼ぶと描画されることが期待できます。ただし、これをやると実行中の CSS アニメーションがおかしくなります。