javascript - 为什么我的 JS 代码在运行，而 DOM 操作还没有完成

Question

构建一个小型文件 uploader ，我使用类似于以下代码段的内容。在立即开始上传(这里是一个警告)之前，它应该给我打印一份所选文件的列表。在 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()是窗口的内置函数，被认为是同步CPU代码；3.javascript引擎会优先执行同步代码，alert弹窗先出现；4.lert一个特殊的block性质，执行javascript引擎block live；

由于以上原因，导致了离奇的“alert执行顺序问题”。我们无法将页面渲染成同步操作，然后不得不将 alert() 变成异步代码，渲染页面后就可以执行。