Javascript 强制元素重绘并防止浏览器冻结

我有一些普通的JavaScript，可以更改div的innerHTML，然后运行一个计算量很大的循环。现在它冻结了浏览器，在完成所有操作之前不会显示任何更新的内容

相反，我希望在更改innerHTML后立即强制重画，并将循环分解为单个步骤，从而不会冻结浏览器

我尝试将循环放入一个值为1的setTimeout，但没有任何效果。它似乎确实可以工作（至少在Chrome中），超时时间至少为100毫秒，但这会导致明显的延迟

我还尝试了一些其他的方法来强制重新绘制（比如和其中一些），但没有成功

我还尝试将循环拆分为单独的步骤，但超时时间以及通过超时函数执行迭代变量再次出现问题

var stuff = "...";
document.getElementById("div").innerHTML = stuff;

for(var i = 0; i < someClass.length; i++){
    document.getElementsByClassName("something")[i].style.backgroundImage = computationallyHeavyFunction(document.getElementsByClassName("something")[i].getAttribute("data-something"));
    }

var stuff=“…”；
document.getElementById（“div”）.innerHTML=stuff；
for（var i=0；i

在操作dom时，建议将它们处理到RAF/或函数循环中，而不是

for循环

，因为这是一个渲染，所以在移动到下一个渲染步骤之前，您应该等待每个渲染步骤完成，而不会影响整个CPU/RAM的使用

使用函数循环，您可以

async function run(i = 0){
  if(i < someClass.length){
     document.getElementsByClassName("something")[i].style.backgroundImage = await computationallyHeavyFunction(document.getElementsByClassName("something")[i].getAttribute("data-something"));
     
     // you should check the element is finish before running this part
     i++
     run(i)
  }
}

run()

异步函数运行（i=0）{ if（i感谢您的回复。我实现了这段代码，但它会等到所有内容都计算出来后再渲染。您建议如何在执行每个run命令之前检查元素是否已完成？您可以在computationallyHeavyFunction上使用promise或async/await来等待它完成，我编辑代码以反映它。