defer async

defer vs async

defer vs async /来自网络

代码实验

https://github.com/webaifei/js-topics/tree/master/async-defer

defer属性

1. 使用

<script defer src="some.js"></script>

2. 表现
   • 阻塞DOMContentLoaded事件的触发，直到脚本下载、解析执行完成之后。
   • 设置了defer属性的脚本 按照出现的属性执行
   • 脚本的下载不会阻塞GUI线程渲染。
   • chrome 浏览器分配了一个低优先级的下载线程来加载资源

async属性

1. 使用

<script async src="some.js"></script>

2. 表现
   • chrome分配一个低优先级：low 线程加载资源
   • 设置async属性的脚本加载完成之后会立即执行，不会等待dom构建完成，当然解析执行的时候同样会阻塞GUI线程的渲染
   • 执行的顺序不会按照脚本出现的顺序执行，哪个先下载完就先进行解析执行。

总结

设置了async 和defer的脚本资源 加载过程 都不会阻塞html的解析，GUI的渲染；
但是解析执行过程和普通的脚本一样，会阻塞GUI的渲染执行。
因为async 脚本的执行顺序不会按照实际的编码顺序执行，所以依赖性无法保证。

参考：

1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

2.需翻墙： understanding-async-defer-while-loading-javascript-files-in-html