解决脚本阻塞问题

async和defer

在script标签种使用async属性时，脚本不会阻塞页面渲染，而是直接下载执行。但是脚本的加载运行次序无法控制。

当页面的脚本之间相互独立，且不依赖本页面的其他任何脚本时，async是最理想的。

<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>

三者的调用顺序不确定。

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

<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

脚本调用策略小结：

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