javascript - DOM manip 被*之后*调用的长时间运行的函数阻塞？

Question

简单的问题。

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

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();
};

click 事件! 和 block() did! 在长时间运行的函数退出后同时出现，而不是 click 事件! 触发立即并 block() 完成! 稍后出现。

这是一个演示:http://jsfiddle.net/bxuNb/1/

如果notify("click event!");替换为alert("click event!");，那么它会立即响应。这是怎么回事？

谢谢!

Answer 1

What's so special about the DOM that manipulating it is blocked by javascript functions

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

…invoked after the DOM manipulation calls

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

如果您想让屏幕在其间更新，请在第一次输出后启动长时间运行的 block 并设置超时:

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