Цикл блокирует DOM, манипулируя кодом перед ним

Question

Здесь я использую код цикла (полученный из Что эквивалентно Java Thread.sleep () в 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 не может получить время обработки для обновления представления.

Вывод: не пишите блокирующий JavaScript! Используйте его асинхронную природу и инструменты браузера (DevTools> Latency).