javascript - innerHTML 不能被信任 : Does not always execute synchronously

Question

要查看实际问题，请参阅 this jsbin .单击按钮会触发 buttonHandler()，如下所示:

function buttonHandler() {
  var elm = document.getElementById("progress");
  elm.innerHTML = "thinking";
  longPrimeCalc();
}

您可能希望此代码将 div 的文本更改为“thinking”，然后运行 ​​longPrimeCalc()，这是一个需要几秒钟才能完成的算术函数。然而，事实并非如此。相反，“longPrimeCalc”先完成，然后在运行完成后将文本更新为“thinking”，就好像两行代码的顺序颠倒了一样。

看起来浏览器并没有同步运行“innerHTML”代码，而是为其创建了一个新的线程，该线程在它自己的空闲时间执行。

我的问题:

1. 导致这种行为的幕后原因是什么？
2. 我怎样才能让浏览器按照我期望的方式运行，即强制它在执行“longPrimeCalc()”之前更新“innerHTML”？

我在最新版本的 chrome 中对此进行了测试。

Answer 1

您的猜测不正确。 .innerHTML 更新确实同步完成(并且浏览器绝对不会创建新线程)。在您的代码完成之前，浏览器根本不会更新窗口。如果您以某种需要更新 View 的方式询问 DOM，那么浏览器将别无选择。

例如，在设置完 innerHTML 之后，添加这一行:

var sz = elm.clientHeight; // whoops that's not it; hold on ...

---

edit — 我可能想出一种方法来欺骗浏览器，或者这可能是不可能的；在一个单独的事件循环中启动你的长计算肯定会使其工作:

setTimeout(longPrimeCalc, 10); // not 0, at least not with Firefox!

---

这里的一个很好的教训是，浏览器尽量不对页面布局进行无意义的重排。如果您的代码在质数休假期间中断，然后返回并再次更新 innerHTML ，浏览器将节省一些无意义的工作。即使不是绘制更新的布局，浏览器仍然必须弄清楚 DOM 发生了什么，以便在询问元素大小和位置等问题时提供一致的答案。