每日一题:script标签中的defer和async区别
前言
大家好，我是JOJO。梦想是每天睡到自然醒！
今天呢，跟大家分享一道面试题:
问: script标签中的defer和async有什么区别、或者说有什么用？
这道题呢？其实并不难，基本上看下文档介绍、都能回答出来。但是呢，俩这概念很相近，很容易记乱。下面们就一起来学习一下！
题目
script标签中的defer和async有什么区别、或者说有什么用？
分析
首先呢，我们都知道script标签是用来加载和执行js脚本的。
defer从字面来说是推迟的意思，async则是异步的意思；
下面呢，我们结合一张很清晰的图来说明（图片来源网络）
- 绿色 表示html的解析
- 蓝色 表示加载js
- 红色 表示执行js
从这张图，我们可以看到在不同script属性下，js的执行线程，和html解析线程发生的过程不一样；
提示
html解析和js的执行是互斥的。
通过上面的解释，我们可以发现
默认：
暂停html解析，下载JS，执行JS，继续解析html
defer属性
继续html解析，异步下载js，html解析完后在执行js。
(这个机制，和把script放到body标签内部最后、是一个道理)
async属性
继续html解析，异步下载js，执行js，html继续解析
总结
defer 和 async 都是异步加载js，性能会高于默认的script加载！
区别在js的执行时间，defer是等html解析完在执行。async则是在下载完就执行！
现在，大家都很清晰了吧！
\
