强制DOM元素刷新/重绘

Question

说我有一个div和两种样式：

.off { background: gray; }
.on { background: red; }

最初，我给div样式是.on。

在启动大循环之前，我将.off样式赋予div。循环之后，我再次给div赋予样式。

document.getElementById("divID").className = "off";

for (i = 0; i < 10000000; i++ ){}

document.getElementById("divID").className = "on";

div永远不会显示灰色背景。这是正常的，因为，如果我对Javascript了如指掌，则在循环开始后，直到循环结束时才可以修改DOM。同步的东西。该怎么解决？

我已经检查了许多关于stackoverflow的方法：等待/睡眠函数，超时，更改.offsetheight，玩显示：无/阻止等。2020年绝对无效。

如果我检查循环内部，则进入循环后div的样式为.off。只是DOM不会呈现新背景。

如何强制渲染？如何确定元素的类一旦更改就可以在视觉上进行更新，然后再进行下一步操作？这个想法是在长时间的计算过程中“禁用”应用程序的GUI，然后在计算完成后“启用”它。

谢谢。