script标签中async和defer两个属性的作用和区别

背景

通过<script>标签引入第三方库,如果因为提供者那边的问题,使得内容加载缓慢,就会阻塞DOM的渲染,就可能会导致页面空白

而这两个属性就是用来解决这个问题的

相同点

都是通过异步立即开始下载脚本文件,

这里对这个异步立即下载写一个我自己的理解:当执行到异步的内容时,异步的内容会立即开始下载,但同步的内容不需要等待其下载完毕,而是继续执行后面的内容

都不会阻塞DOM的渲染

不同点

defer要在文档解析完成后才能执行,而且如果有多个<script>标签添加了defer属性时,这些脚本文件的执行要按文档上的先后顺序来执行

async是下载完成后立即执行,而且没有顺序的要求,谁先下载完成谁先执行