总结一下使用三种不同的方式加载JS脚本，对DomContentLoaded事件的影响

在本文中，我们将总结一下使用三种不同的方式加载JS脚本，对DomContentLoaded事件的影响。DomContentLoaded事件是指浏览器解析完HTML文档，构建了DOM树后触发的事件，它通常用于执行一些依赖于DOM元素的操作。加载JS脚本有三种方式：默认加载、defer和async，它们分别有不同的特点和影响。

默认加载

默认加载是最常见的一种方式，就是直接在HTML文档中使用标签引入外部脚本。这种方式的特点是：

  • 脚本会按照声明的顺序依次执行。
  • 脚本会阻塞HTML文档的解析和DOM树的构建，直到脚本执行完毕。
  • 脚本会阻塞后面的脚本和样式表的加载和渲染。
  • 脚本会延迟DomContentLoaded事件的触发，直到所有的脚本执行完毕。

这种方式的优点是简单易用，保证了脚本之间的依赖关系。缺点是会影响页面的性能和用户体验，因为页面会出现白屏或者卡顿的现象。

defer

defer是一个HTML5新增的属性，可以用于