script标签中的async与defer
都是为了避免页面在加载脚本时遇到阻塞等问题而导致白屏等问题的出现
下面对两者的异同点做了一些归纳总结:
相同点:
- 都是以异步的方式来加载脚本的,不会对其它资源的加载造成阻塞
- 属性值都只对外部脚本有效(
defer
的标准是在HTML5
中规定的,所以在IE老版本的浏览器中可能会支持内部脚本) - 异步的方式导致脚本都不会立即执行,但是总是在
load
之前执行的
不同点:
![](https://cdn-static.xxcheng.cn/static/blog/images/2021/09/25/7ec9f6c38cc29bb7330e9e725e4d9119.png)
![](https://cdn-static.xxcheng.cn/static/blog/images/2021/09/25/7a0c282ffe9e5eaff7f87f9d9df15976.png)
defer
- 脚本的执行是有次序的
- 脚本的执行总是在
DOMContentLoaded
之前,但是实际并非如此
![](https://cdn-static.xxcheng.cn/static/blog/images/2021/09/25/7ec9f6c38cc29bb7330e9e725e4d9119.png)
![](https://cdn-static.xxcheng.cn/static/blog/images/2021/09/25/7b6e2916d82b16185dd0a0fc168c8bd4.png)
async
- 无法保证按次序执行
- 无法确定是否在
DOMContentLoaded
前后什么位置执行
![](https://cdn-static.xxcheng.cn/static/blog/images/2021/09/25/e4e258ce639a39950b3f08cb7268d74b.png)
![](https://cdn-static.xxcheng.cn/static/blog/images/2021/09/25/9473959996107d74d3ec44f7558879a5.png)
以上图片仅是我当时测试的结果,很难测试出书本中的结论,后期阅历增加考虑在回来重新更新
参考部分了链接
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。