Question

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

  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引擎无法获得更新视图的处理时间。

结论：不要编写阻塞性JavaScript！利用其异步特性和浏览器工具（DevTools> Latency）。

循环在其之前阻止DOM操作代码

1 个答案: