Почему происходит мой код JS, а манипулирование DOM не закончено?

Question

Создавая небольшой загрузчик файлов, я использую что-то вроде следующего фрагмента.Он должен напечатать мне список выбранных файлов, прежде чем начать загрузку (здесь предупреждение) сразу.В Firefox все работает как положено.Но в Chrome предупреждение срабатывает до того, как распечатывается список.

Почему это так?Как я могу заставить JS ждать, пока список там?Какова лучшая практика здесь?

document.querySelector("#inputFiles").addEventListener('change', function() {
  var files = this.files;
  var i = 0;
  while (i < files.length) {
    document.querySelector("#filelist").innerHTML += files[i].name + "<br>";
    i++;
  }
  alert("start upload, after list is printed!");
}, false);

<input type="file" id="inputFiles" multiple/>
<div id="filelist"></div>

Answer 1

1. Потому что рендеринг страницы - это операция DOM, это будет механизм Javascript в очереди событий;2.lert () - встроенная функция окна, считается синхронизированным кодом ЦП;Движок 3.javascript будет отдавать приоритет выполнению кода синхронизации, сначала появляется всплывающее окно с предупреждением;4. Оповещение специального блока природы, реализация блока движка javascript live;

по вышеуказанным причинам привела к причудливой «проблеме порядка выполнения предупреждений».Мы не можем отобразить страницу в операции синхронизации, поэтому пришлось предупредить (), чтобы она стала асинхронным кодом, который вы можете выполнить после рендеринга страницы.