关于script异步是否可以使用DOMContentLoaded

首先要了解

script/defer

defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。也就是说defer属性的
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

点击执行后都为:

以上都可以执行，接下来就是DOMContentLoaded

Dom

DOMContentLoaded.js

document.addEventListener("DOMContentLoaded",function(){
  var span=document.getElementById("demo\");
  console.log(span,"DOMContentLoaded")
})

直接执行（没有问题）

“defer”执行（没有问题）

“async”执行（没有出现结果）

总结

从上可知，需要了解HTML如何加载

猜想：DOMContentLoaded都执行完了，async还在异步执行中 （async是让这个script独立于页面其他部分加载，所以可能整个页面加载完成了，并且DOMContentLoaded在加载脚本或注册事件之前就执行了，所以就错过了事件）

参考：

DOMContentLoaded 与 load事件

js并行加载，顺序执行

Running Your Code at the Right Time