script标签上的defer及async属性

script标签上的defer及async属性

1、是什么

• Async：异步加载这个文件（只对外部脚本文件有效）。异步下载文件，之后立即加载和异步执行文件，该过程是与后续dom元素的渲染过程是同时执行的。
• Defer: 延迟加载这个文件（只对外部脚本文件有效）。异步下载文件，之后立即加载但延迟执行，延迟到在所有dom元素解析完成后，Loaded 事件触发之前才执行。
  

2、 加载情况，具体详解

• 1、脚本下载都为异步:defer 和 async 在网络读取（脚本下载）这块儿是一样的，都是异步的（相较于 HTML 解析)。

• 2、关于 defer文件什么时候加载并执行：在所有dom元素解析完成后，Loaded 事件触发之前才加载并执行。

• 3、关于async文件什么时候加载并执行： 不管你声明的顺序如何，只要它加载完了就会立刻执行

• 4、两者的差别：
defer是立即下载之后加载，但延迟执行，加载后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行要在所有元素解析完成之后，Loaded 事件触发之前才执行。
  async是立即下载之后加载，并执行，加载和渲染后续文档元素的过程将和js脚本的加载与执行并行进行（异步）。

• 5、async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。

脚本的全过程：下载文件—》加载文件----》执行脚本内容

3、 应用场景

比如有些第三方库，要求在header中引入（这就意味着第三方插件库会优先加载），

如果我们并不需要在页面加载之初就用到这个插件。那么我们可以加上defer属性使之最后加载。

如果我们页面加载的同时需要用到这个插件，那么我们引用的时候可以加async属性，这样网站内的资源就可以与插件资源异步加载。这中方法会给网站其他资源的加载节省出一些时间，不失为一种页面优化的方法。