script标签中defer和async

Problem：

script会阻塞页面的加载，如果是引用外部js的话，可能会由于这个外部js请求很久而出现空白页问题
解决方法：defer / async

• defer

<script src="a.js" defer></script>
<script src="b.js" defer></script>

• 不会阻止页面解析，并行下载对应的js文件;
• 下载完之后不会执行;
• 等所有其他脚本加载完之后，在DOMContentLoaded事件之前执行对应a.js、b.js。

• async

<script src="c.js" async></script>
<script src="d.js" async></script>

• 不会阻止DOM解析，并行下载对应的js文件;
• 下载完之后立即执行。

DOMContentLoaded事件

• 是等HTML文档完全加载完和解析完之后运行的事件;
• 在load事件之前，不用等样式表、图像等完成加载。