DOM操作被长时间运行的func阻塞，之后调用

DOM manip blocked by long-running func invoked *afterwards*?

本文关键字：阻塞 之后 调用 func 操作 长时间 运行 DOM      更新时间：2023-09-26

简单问题。

DOM有什么特别之处，以至于在DOM操作调用后被调用的长时间运行的javascript函数阻止了对它的操作？这里有一个例子：

function notify(msg) {
  var div = document.createElement("div");
  div.textContent = msg;
  document.body.appendChild(div);
}
// long-running func
function block() {
  var iter = 3e8;
  while (iter--)
    Math.sqrt(iter);
  notify("block() done!");
}
document.body.onclick = function(){
  notify("click event!");
  block();
};

两者，点击事件和块（）完成在长时间运行的函数退出后同时出现，而不是单击事件立即触发并完成block（）稍后出现。

这里有一个演示：http://jsfiddle.net/bxuNb/1/

if通知（"点击事件！"）替换为警报（"点击事件！"），然后它立即响应。这是怎么回事？

谢谢！

DOM的特殊之处在于，javascript函数会阻止对其进行操作

它经过了优化。您的屏幕不会在每次与DOM交互后重新绘制。

…在DOM操作调用后调用

不可能知道在执行过程中没有进一步的DOM操作，因此它不会立即更新您的屏幕。尽管静态代码分析可以实现这一点，但在您的示例中还有另一个DOM操作。解释器就是不知道中间的几行代码会花那么长时间来执行。

如果你想让屏幕在两者之间更新，在第一次输出后超时启动长时间运行的块：

document.body.onclick = function(){
  notify("click event!");
  setTimeout(block, 0);
};
相关文章：