script的三种加载方式

script三种加载方式

一、不带任何属性

<script>

当浏览器解析到script标签时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，是个同步阻塞的过程。

而如果想要异步执行script，则可以给其加上async或defer属性。

二、async属性

<script async>

async属性会在HTML解析期间异步下载文件，并在完成下载后暂停HTML解析器去执行script中的代码。

三、defer属性

<script defer>

defer属性在HTML解析期间异步下载文件，并且只在HTML解析完成后才执行它。

那么这三种方式各在什么情况下使用呢？

通常来说，尽可能使用async，然后是defer，最后不使用属性。
并遵循以下规则：

1. 如果脚本之间有依赖关系不要用async，因为多个async脚本下载与解析的顺序是不一定的。
2. 如果脚本很小并且异步脚本依赖该脚本，则不加属性。

兼容性

1、Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 async 属性。
2、所有主流浏览器都支持 defer 属性。

参考链接

https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html