Script标签中的defer和async

引入脚本

我们在html中引入脚本时会使用到下面几种方式

<script src='xxx'></script>
<script src='xxx' async></script>
<script src='xxx' defer></script>

浏览器在解析HTML的时候，如果遇到一个没有任何属性的script标签，就会暂停解析，先发送网络请求获取该JS的代码内容，然后让JS执行该代码，当代码执行完毕后再接着解析HTML。

也就是说常规script标签阻塞了浏览器对HTML的解析，如果获取JS的网络请求没有得到回应，或者JS执行时间过长，都会导致页面的长时间白屏，让用户看不到页面。

async

async表示异步，当浏览器遇到带有async属性的script时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析HTML，一旦网络请求回来之后，如果此时HTML还没有解析完，浏览器会暂停解析，先让JS先执行代码，执行完毕后再进行解析HTML，当然，如果在JS请求回来之前，HTML已经解析完毕了，那就会立即执行JS代码。

async是不可控的，因为JS的执行时间不确定，所以如果想要在一个异步JS脚本中获取某个DOM元素，有可能获取到也有可能获取不到。而且如果存在多个 async 的时候，它们之间的执行顺序也不确定，完全依赖于网络传输结果，谁先到执行谁。 这就会导致如果我们导入的第二个JS依靠第一个JS执行，那么第二个JS的执行就有可能出现问题。

defer

defer表示延迟，当浏览器遇到带有defer属性的script时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时HTML还没有解析完，浏览器不会暂停解析并执行JS代码，而是等待HTML解析完毕再执行JS代码。

并且如果存在多个defer script标签，浏览器会保证它们按照在HTML中出现的顺序执行，不会破坏JS脚本之间的依赖关系。

总结

1. <script src='xxx'></script>：常规的script标签会阻塞浏览器的解析，直到脚本加载并执行完毕。

2. <script src='xxx' async></script>：带有async属性的script标签会异步加载脚本，加载完成后会立即执行，可能阻塞，也可能不阻塞文档解析，执行时机不确定。

3. <script src='xxx' defer></script>：带有defer属性的script标签也是异步加载脚本，但会在文档解析完成后、DOMContentLoaded事件触发前执行，多个defer script会按照顺序执行，并且不会破坏脚本之间的依赖关系。

补充

使用<link rel="preload">预加载js文件

例如 <link rel="preload" href="very_important.js" as="script"> 几乎可以链接到任何东西上，as 属性告诉浏览器要下载的是什么。一些可能的值是：

• script
• style
• image
• font
• audio
• video

有一点要注意，要预加载字体你还必须设置crossorigin 属性，即使字体在同一个域名下 <link rel="preload" href="font.woff" as="font" crossorigin>

preload 兼容性受限，可以在caniuse中查看详细兼容性。