Javascript script标签的属性async、defer和src
关于script标签
通过script标签，可以在HTML页面上加入JavaScript。script主要有6个属性：async,defer,src,charset,language,type。
今天重点介绍总结 async,defer和src三个属性，并且着重区分async和defer的区别特点。
属性async,defer以及src是什么？
async:表示立即下载脚本，只适用于外部脚本（src）
defer:表示脚本可以延迟到文档页面完全被解析和显示后再执行，只适用于外部脚本
src:载入外部文件
情况①不加async和defer
<script src="script.js"></script>
当script标签不加async和defer属性时
浏览器在读到script标签时，就会停止HTML的解析，进而去下载脚本文件并执行，脚本文件执行完毕后，再继续解析HTML；
情况②只加async
<script src="script.js" async></script>
当script标签有async属性时，表示浏览器在遇到script标签时，会异步下载脚本，下载完后立即执行脚本。
即：遇到脚本就下载，下载的同时可以继续解析HTML；脚本下载完后，HTML解析暂停，立即执行脚本。
情况③只加defer
<script src="script.js" defer></script>
当script标签有defer属性时，也是浏览器在遇到script标签时，会异步下载脚本，但下载完并不立即执行脚本。
即：遇到脚本就下载，下载的同时可以继续解析HTML；但要等到DOM解析完成才会执行脚本。
图片总结①~③
总结：
-
async和defer都可以让浏览器在遇到script标签时，异步下载脚本（不影响HTML的解析）。
-
async使得脚本下载完就立即执行脚本，HTML解析则暂停
-
defer是要在DOM解析完毕后，才执行，并没有在下载完毕后立即执行。
-
若没有async或defer，则无法异步下载脚本。浏览器就得停下HTML的解析，转而下载脚本，并下载完立即执行。
属性src的一点提醒
在书上看到的：带有src属性的script元素不应该在< script >和< / script >之间再包含额外的JS代码。如果包含了额外的JS代码，只会下载并执行外部脚本文件，嵌入的代码会被忽略。