DOM操作被长时间运行的func阻止后调用*？

Question

简单的问题。

操纵它的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 notify（“click event！”）; 替换为 alert（“click event！”）; ，然后立即响应。这是怎么回事？

谢谢！

Answer 1

  

操纵它的DOM有什么特别之处被javascript函数阻止

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

  

...在DOM操作调用

之后调用

无法知道执行中没有进一步的DOM操作 - 因此它不会立即更新您的屏幕。即使可以通过静态代码分析实现这一点，但在您的示例中是另一个DOM操作。解释器只是不知道中间的几行代码将花费很长时间来执行。

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

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