时间戳

首页 > 解决方案 > Loop blocks DOM manipulating code before it

javascript - Loop blocks DOM manipulating code before it

问题描述

Here I use the loop code(learned from What's the equivalent of Java's Thread.sleep() in JavaScript?) to simulate web latency to check my loading animation effect. However, the first line is blocked for 5 seconds too. while the second line(the log statement) isn't. What's happening?

  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'

标签： javascriptecmascript-6

解决方案

浏览器在一个线程中运行（它不是，但为了简单起见我们假设）。在该线程上运行多个引擎，一个用于 CSS 和 HTML，一个用于 JavaScript。

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

这两个语句有很大的不同：日志记录由 JavaScript 引擎完成，而 DOM 突变被发送到 HTML 引擎。现在发送是异步的，因为 HTML 引擎当前没有像 JavaScript 引擎那样运行，因此突变将在某种队列中结束。现在您阻塞了 JavaScript 引擎，因此也阻塞了浏览器线程，因此 HTML 引擎无法获得更新视图的处理时间。

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

推荐阅读