＜srcipt＞标签上的 ‘defer‘和‘async‘ 属性的作用

<srcipt>标签上的 ‘defer’和’async’ 属性的作用

文档结构

就两个文件，一个html，一个js；

• 主要是看 test.js 文件中 console的时间，以及 appDom 的值

什么属性都没有

<script src="./test2.js"></script>

• 这里很清楚的看出，我们的 html 解析分成了两段，中间被我们的 (test.js) 文件阻塞了。

defer 属性

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

• 这里的话，可以看出我们的html解析从 html 加载成功就开始了，并且html解析完成之后，我们的js才执行。

async 属性

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

• 这个就比较尴尬了，换了很多浏览器测试结果和 defer 的结果几乎一样，执行的开始时间也是html解析完成之后。
• 有一个关键点就是 async 的执行时间早于 defer
• mdn的原话是 “对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。” 重点： 并尽快解析和执行， 究竟多快，没有定义。。。
• 有清楚的大佬望告知。

用法

用法的话倒是清楚无疑了。

1. 两个都不使用：
	由于是同步、顺序执行，所以如果处理不好可能就会出现两个常见的问题： 1）获取不到页面的dom； 2）阻塞页面的渲染(白屏)
所以如果真要用到这个的话，最好就是放在页面底部(body之外)吧。
	可以使用 document.write();

---

2. `defer`
	当.js文件 `需要操作` 页面 dom 的时候。
	·禁止·使用 document.write();

---

3. `async`
	当.js文件 `不需要操作` 页面 dom 的时候。
	·禁止·使用 document.write();

还有一点就是： 当同时存在 defer 和 async 的时候，async 生效。