问题代码

index.html
1
2
3
4
5
<html>
  <head>
    <script src="/main.js" async></script>
  </head>
</html>
main.js
1
2
3
document.addEventListener("DOMContentLoaded", () => {
  console.log("Hello World！");
});

解决思路

问题就出在引入main.js使用了async导致HTML解析和JavaScript运行同时执行。

解决办法也很简单，首先JavaScript有一个document.readyState的属性用来获取加载状态，其中属性可以为：

1
2
3
4
5
loading（正在加载）

interactive（可交互）

complete（完成）

其中 如果已经是非loading状态了，那么在去添加DOM完成事件肯定就不会执行完成后的操作了。

顾解决办法如下：

main.js
1
2
3
4
5
6
7
8
9
const initialize = () => {
  console.log("Hello World！");
};

if (document.readyState !== "loading") {
  initialize();
} else {
  document.addEventListener("DOMContentLoaded", initialize);
}