DOMContentLoaded和Loaded区别，defer和async区别

DOMContentLoaded和Loaded区别

页面生命周期内，有两个非常重要的事件：

1. DOMContentLoaded 此时浏览器已经完全加载了HTML文件，并且DOM树已经生成好了。但是其他外部资源，如样式文件、图片、字体等并没有加载好。
2. Load 此时浏览器已经将所有的资源都加载完毕，可以正确读取页面中的资源。
3. 执行完script脚本, 继续页面的解析渲染。页面解析渲染完, 才会触发DOMContentLoaded。所以普通script脚本的下载和执行如果慢, 会延迟DOMContentLoaded事件的触发时间。

异步scripts

当解析器(HTML Paser)读取到内联标签时，会阻塞DOM构建，它会立即执行脚本，原因是可能这些脚本会影响DOM，因此需要等到这些脚本都执行完成了，才会触发DOMContentLoaded事件。 外部脚本（）也是如此，浏览器需要等到加载后再执行完成才可以继续执行。

async & defer

这两个属性都是告诉浏览器，标记的脚本不需要等待它加载完成，浏览器可以继续完成DOM构建和渲染 两者的区别如下：

因此async更符合一些应用场景。