javascript - 循环会阻止之前的 DOM 操作代码

Question

这里我使用循环代码(从 What's the equivalent of Java's Thread.sleep() in JavaScript? 学到的)来模拟网络延迟来检查我的加载动画效果。然而，第一行也被阻塞了5秒。而第二行(日志语句)则不是。发生什么事了？

  main.innerHTML += '<div id="animation-container"></div>'
  console.log("??????????");

  var e = new Date().getTime() + (5 * 1000);
  while (new Date().getTime() <= e) {}

  main.innerHTML += 'real content'

Answer 1

浏览器在一个线程中运行(事实并非如此，但为了简单起见，让我们假设这一点)。在该线程上运行多个引擎，一个用于 CSS 和 HTML，一个用于 JavaScript。

 main.innerHTML += '<div id="animation-container"></div>'
console.log("");

这两个语句有一个巨大的区别:日志记录由 JavaScript 引擎完成，而 DOM 突变则发送到 HTML 引擎。现在发送是异步的，因为 HTML 引擎当前没有像 JavaScript 引擎那样运行，因此突变将最终出现在某种队列中。现在您阻止了 JavaScript 引擎，因此浏览器线程也被阻止，因此 HTML 引擎无法获得更新 View 的处理时间。

结论:不要编写阻塞 JavaScript!利用其异步特性和浏览器工具(DevTools > Latency)。