script标签中的async、defer属性

script标签是我们常用的引用js脚本的一种方式。

撸代码的时候，我们常常只写src属性，直接忽略其他的属性：async、defer

顾名思义async就是异步，在不影响其他资源加载的同时，异步加载这个文件；defer就是延迟加载。

async: 可选属性。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效（写在html文件中的js代码，添加此属性无效，仍按代码加载顺序执行）。
defer: 可选属性。标识脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。

Html代码：

进入的js文件中，同文件序号分别console.log,1,2,3,4,5,6；

test1 test2

在浏览器中打开这个html文件，我们可以看到6个js文件按照顺序加载。

image.png

image.png

OK.现在我给js1文件加上defer属性，看看。

实验证明：

js文件依然按照书写顺序加载，在控制台可以看到，js1文件的代码是最后执行的。

image.png

那我们还原代码，给js6文件加上async属性试试，看看会不会第一个输出6

很遗憾，实时并没有按照预想的那样输出6，0，1，2，3，4，5

image.png

如上图代码还是按照顺序执行了，为什么defer生效了，async没生效呢？

我们换个文件试试，给中间位置的某个文件添加async属性。我给js3加了async属性后，代码执行顺序发生了如下变化：

image.png

我们都知道，js是按照书写顺序加载，按照书写顺序执行的。文件加载之后，程序便开始解析文件中的代码。

因此添加了async属性的文件，需要加载到这个文件位置的时候才会生效，js6已经是最后一个文件了，最后一个加载的文件中的代码自然就最后执行，因此看起来async在我们的第一个demo中没有生效。

async是异步加载，而不是优先加载，因此js3文件添加了async属性后，当文件加载到js3,同时开始加载js3之后的文件，于是便出现了上图0,1,2,4,3,5,6的结果，当然这个结果不是必然的，因为我们的demo里面的代码非常简短，如果js4中的代码逻辑复杂，那么结果可能任然是0,1,2,3,4,5,6。

说到这里，大家明白async和defer的原理了吧。

总结：那么什么场景下可以用到这些属性呢？

比如有些第三方库，要求在header中引入（这就意味着第三方插件库会优先加载），但是我们并不需要在页面加载之初就用到这个插件。那么我们可以加上defer属性使之最后加载。同理，如果页面加载的同时需要用到第三方插件，那么我们引用的时候可以加async属性，这样网站内的资源就可以与插件资源异步加载。这中方法会给网站其他资源的加载节省出一些时间，不失为一种页面优化的方法。