script 标签中的 async defer

关于脚本阻塞问题，一般的处理方法是将脚本的放在</body>之前进行引入。这样脚本就会在HTML 解析完后加载了。

现在有两种解决方法 

1. 在script标签添加 async 属性

浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其它任何脚本时，async 是最理想的选择。

<script async src="/js1.js"></script>
<script async src="/js2.js"></script>
<script async src="/js3.js">

三者的调用顺序是不确定的。js1.js 可能在 js2.js和 js3.js之前或之后调用，如果这样，后两个脚本中依赖 js1.js的函数将产生错误，因为脚本运行时 js1.js尚未加载。

这种情况就要使用 defer 属性

2 在script标签添加 defer 属性

使用 defer 属性，脚本将按照在页面中出现的顺序加载和运行

<script defer src="/js1.js"></script>
<script defer src="/js2.js"></script>
<script defer src="/js3.js">

添加 defer 属性的脚本将按照在页面中出现的顺序加载，因此第二个示例可确保 js1.js必定加载于 js2.js 和 js3.js 之前，同时 js2.js 必定加载于 js3.js之前。

 

本调用策略小结：

• 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
• 如果脚本需要等待解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。